Vue--iconfont图标

1.三种方式以及优缺点

  1.unicode 引用 （不支持多色，支持按字体的方式去动态调整图标大小，颜色）

        2.font-class 引用 （unicode使用方式的一种变种，语意明确，容易分辨是哪个icon，本质上还是使用的字体，所以多色图标还是不支持的）

        3.symbol 引用（全新的使用方式，未来的主流，推荐用法。支持多色图标、支持像字体那样来调整样式）

兼容性 unicode > font-class > symbol
 

2.使用

第一种unicode

第二种fontclass

第三种symbol

需要使用工具iconfont-tools进行处理

①以symbol方式下载到本地

 ②安装iconfont-tools（windows+R，cmd打开dos窗口，安装iconfont-tools）

执行命令为：npm install -g iconfont-tools

③将下载压缩包解压，取出iconfont.js文件，将iconfont.js文件放入iconfont-tools文件夹下（iconfont-tools在node安装路径下\node_global\node_modules\内，我是将nodejs安装在F盘下）

④命令提示符执行命令：iconfont-tools，一直回车使用默认设置就好，执行完毕后iconfont-tools文件夹下会生成iconfont-weapp文件夹。

⑤将iconfont-weapp文件夹中的iconfont-weapp-icon.css放至static静态资源文件夹下，并全局引用该css文件。

⑥根据图标实际名称使用图标，注意要带上t-icon。