图标字体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。在网页中打开此文件便可。