Vue 中 iconfont 使用

图标库的发展过程，iconfont图标库的重要性（项目常用）

对于前端而言，图标的发展可谓日新月异。从img标签，到雪碧图，再到字体图标，svg，甚至svg也有了类似于雪碧图的方案svg-sprite-loader。在项目实践中，bootstrap，font-awesome，element-ui等UI库都基本标配了字体图标。

一、Iconfont - 图标管理工具

阿里巴巴旗下阿里妈妈MUX团队打造的图标管理平台。

这是一个专门为设计师和前端开发者打造的在线工具。设计师将图标上传到 Iconfont，可以自定义下载多种格式的icon，也可将图标转换为字体，方便前端工程师自由调整与使用。

通过这个免费的工具，设计师不仅可以浏览下载大量优秀设计师的图标作品，还可以管理和展示自己设计的图标。已经成为很多UI设计师和前端开发者日常工作的必备工具。

大量优质的原创图标库

特点

1. 矢量图标在线存储管理。

2. 设计师绘制的大量图标都可以上传，解决了管理和查找图标非常困难的痛点；

3. 按项目管理图标，支持自定义尺寸和颜色，无论是前端工程师还是UI设计师，再也不用苦逼地切图搬砖了，需要什么尺寸，可以在平台上自行下载；

4. 对于开发者来说，可以把需要的矢量图标以项目的方式管理，一键生成在web上通过css字体控制的矢量图标，支持在web/h5/小程序/App上调用，使用简单便捷，再也不需要用模糊的图片图标了；

5. 对于设计师来说，平台上有上千上万设计师分享自己设计的图标，绝对是图标设计学习和灵感的利器。

二、Iconfont - 基础使用

引入iconfont的三种方式：Unicode、Font class、Symbol。

1、Unicode方式（不推荐）

在线使用

1）index.scss中引入在线字体

@font-face {  font-family: 'iconfont';  /* project id 1254715 */    
src: url('//at.alicdn.com/t/font_1254715_s1khj1whikd.eot');    
src: url('//at.alicdn.com/t/font_1254715_s1khj1whikd.eot?#iefix') format('embedded-opentype'),    
url('//at.alicdn.com/t/font_1254715_s1khj1whikd.woff2') format('woff2'),    
url('//at.alicdn.com/t/font_1254715_s1khj1whikd.woff') format('woff'),    
url('//at.alicdn.com/t/font_1254715_s1khj1whikd.ttf') format('truetype'),    
url('//at.alicdn.com/t/font_1254715_s1khj1whikd.svg#iconfont') format('svg');}
复制代码

2）页面中使用

使用时很不友好，使用的是unicode码表示，使用图标还必须去iconfont项目去查询下unicode码。

<template>    
    <div>        
        <i class="iconfont">&#xe7ee;</i>        
        <i class="iconfont">&#xe7ed;</i>        
        <i class="iconfont">&#xe7ec;</i>        
        <i class="iconfont">&#xe7eb;</i>    
    </div>
</template>
复制代码

本地使用

有时候网络不是那么给力的，或者是内网环境，那么就不要考虑用在线引用的方式了。

1）本地使用需要先将字体库下载并放到项目中。

2）在全局样式文件中定义如下代码

@font-face {  font-family: "iconfont";  
src: url('../