图标字体iconfont的使用

什么是iconfont？

iconfont就是字面上的意思，叫做“字体图标”，将一套图标集以字体文件的形式封装，并通过 CSS 的 @font-face 作为 Web Font 调用。

iconfont的好处是什么

众所周知，以往我们图片大多是用png。但是png在使用过程中却有众多不变之处，譬如每个图片都是一个请求，当网页图片较多时，会比较影响加载的速度，不同分辨率的手机，为了响应式的展示页面，可能加有2倍图、3倍图等，使需要加载的资源变多，影响网页的性能。

那么iconfont的好处有哪些呢：

轻量性：一个图标字体比一系列的图像（特别是在Retina屏中使用双倍图像）要小。一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少HTTP请求，还可以配合HTML5离线存储做性能优化。每个小图标只有几kb，大大节省了加载时间。
灵活性：图标字体可以用过font-size属性设置其任何大小，还可以加各种文字效果，包括颜色、Hover状态、透明度、阴影和翻转等效果。可以在任何背景下显示。
兼容性：网页字体支持所有现代浏览器，包括IE低版本。详细兼容性可以点击这里。
可缩放，可以很方便的改变图标的大小。不用担心不同分辨率的设备上展示差异问题。
矢量，iconfont 是矢量的并且具有独立的分辨率，不管在高分辨率还是低分辨率，不管是在网页还是手机端，都具有很好的展示效果，不会出现锯齿或者马赛克模糊。

如何使用iconfont

第一步：

下载所需图标的svg文件

第二步

打开iconfont 点击IcoMoon App，再点击Import Icons 将刚才下载的svg文件导入

第三步

选中之后点击Generate Font

第四步

点击Download下载

上面完成了svg转为iconfont，你也可以在iconfont下载自己自己所需的图标字体

下面说一下如何引入到自己的项目中

将下载的icomoon文件解压缩，将icomoon里面的font文件夹放进项目的src/assets/ 目录下，style.css放进src/assets/styles 目录下
将style.css中对应的代码路径调整正确
在main.js中引入css：import './assets/styles/style.css'
在代码中想引入对应图标只需写上style.css中对应的class名称如

<span class="icon-add-people"></span>

注：如不清楚对应的类名，可参照下载包icomoon中的demo.html。在网页中打开此文件即可。

转载于:https://www.cnblogs.com/yangAL/p/8509993.html

图标字体iconfont的使用相关推荐

HTML字体以及图标字体iconfont、Font Awesome的使用
字体 • 通过font-family可以指定标签中文字使用的字体. • 例如: p{font-family:Arial} 上边这行代码指定了p标签中使用名为arial作为字体 • 一般来说只有用户 ...
react native 使用图标字体(IconFont)
前言今天在做react-native项目时,需要引入图形字体进行使用,但在网上找了很多资料,都是一知半解的,没有说完成,对于像我这样对小白来说很是难受,在经过n久,终于弄好了,现在进行总结一下,希望 ...
iconfont（图标字体）
iconfont(图标字体) iconfont(图标字体) fontawesome 使用步骤通过伪元素来设置图标字体通过实体来显示图标字体 iconfont 使用步骤 a)使用Unicode引用方 ...
ios label 高度紫石英_iOS中iconfont(图标字体)的基本使用
前言近日在做项目时,项目组有提出iconfont的技术,便开始查询相关资料.iconfont技术的主要目的是为减少应用体积而生.首先icon代表图标 font代表字体.此技术便是将图标转化为字体,从 ...
CSS字体和图标字体
目录一字体font 二图标字体三阿里巴巴iconfont图标字体使用方法一字体font 字体相关的样式: color:用来设置字体的颜色:严格意义上color设置前景色,一般都是这样设置 ...
在线引入 iconfont 特殊图标字体
一.前言本节使用的例子是阿里巴巴图标库的图标有时候我们想在自己写的网页上在线引入一个或多个图标字体比如下面这种上面是一些来自阿里巴巴图标库网站的图标如果通过下载到本地然后通过本地引入 ...
icon-font 图标字体的使用
icon-font 图标字体的使用, 方法一:可以在icomoon下载相应的图表字体,官网为:https://icomoon.io/ 进去会提供600+的免费图表,如果想要更多的图表字体可选择Icon ...
Qt引入图标字体包iconfont
客户端总是有各种换肤需求,为实现快速换肤,可引入图标字体包 1.使用阿里巴巴矢量图标库,网址https://www.iconfont.cn,切一张默认颜色的svg图标上传到我的项目,图标会生成一个唯一 ...
iconfont 图标转为字体_iconfont图标字体
一.iconfont的优缺点优点矢量性屏幕适配(缩放) 字体性样式控制(颜色,阴影,甚至浮雕) 文件小一般20-50KB,比图片小很多,例如typicons库有308个icon,字体文件大小 ...