如何在vue中使用iconfront(离线状态离线字体)

baiy 发布于2019-08-02 14:10 / 2289人阅读

摘要：端使用文档来源于官方文档用户在可以下载，多种格式的，平台也可将图标转换为字体，便于前端工程师自由调整与调用。

web端使用(文档来源于官方文档)

用户在iconfont.cn可以下载，多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。

第一步：拷贝项目下面生成的font-face

  @font-face {font-family: "iconfont";

src: url("iconfont.eot");
src: url("iconfont.eot?#iefix") format("embedded-opentype"),
url("iconfont.woff") format("woff"),
url("iconfont.ttf") format("truetype"),
url("iconfont.svg#iconfont") format("svg");
}

第二步：定义使用iconfont的样式(规定了的)
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;}

第三步：挑选相应图标并获取字体编码，应用于页面
3

例如：豆瓣APP中的搜索框

 第一步

复制粘贴到中

最后在div中使用

云服务器 GPU云服务器 webrtc离线使用离线文件服务器在哪里云服务器离线文件在哪阿里云离线文件服务器在哪

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53618.html

iconfront优化项目图标

摘要：为什么要使用图标字体使用这项技术总得有使用它的理由那么，我们来分析下的优缺点，看是不是适合正在开发的项目。优化项目性能字体的加载速度快于图片，就算图片经过合并。为什么要使用图标字体使用这项技术总得有使用它的理由！那么，我们来分析下iconfront的优缺点，看是不是适合正在开发的项目。优点 1、优化项目工作流程对于web前端项目中的图标，很多情况下是使用的png图片，但如果图标...

Karuru 2019-08-30 13:21 评论0 收藏0
iconfront优化项目图标

摘要：为什么要使用图标字体使用这项技术总得有使用它的理由那么，我们来分析下的优缺点，看是不是适合正在开发的项目。优化项目性能字体的加载速度快于图片，就算图片经过合并。为什么要使用图标字体使用这项技术总得有使用它的理由！那么，我们来分析下iconfront的优缺点，看是不是适合正在开发的项目。优点 1、优化项目工作流程对于web前端项目中的图标，很多情况下是使用的png图片，但如果图标...

Riddler 2019-08-01 16:09 评论0 收藏0
前端面试分享: 两年经验社招-阿里巴巴

摘要：作者两年经验第一家任职的是个小公司第二家算是二线互联网公司各待了一年吧能有机会去阿里面试很惊喜先来和大家分享一下面试经历电话面试初探因为还在职的缘故电话面试从晚上点钟开始持续了半个小时左右一开始的时候特比紧张甚至声音略有些颤抖简单自我介绍做作者两年经验, 第一家任职的是个小公司, 第二家算是二线互联网公司, 各待了一年吧... 能有机会去阿里面试很惊喜! 先来和大家分享一下面试经历....

JowayYoung 2019-08-22 15:06 评论0 收藏0
前端每周清单第 29 期：Web 现状分析与优化策略、Vue 单元测试、Headless Chrom

摘要：前端每周清单第期现状分析与优化策略单元测试爬虫作者王下邀月熊编辑徐川前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。 showImg(https://segmentfault.com/img/remote/1460000011008022); 前端每周清单第 29 期：Web 现状分析与优化策略...

HackerShell 2019-08-21 12:05 评论0 收藏0