Vue之vue项目引入icon

一、icomoon:有大量矢量图标，也可以自定义

1、在图标库中下载图标

点击进入icomoon网站点击右上角的“IcoMoon App”，找到自己需要的图标然后点击右下角的“Generate Font”，接着可以在左上角第二个按钮“Preferences”进行自定义你要下载的图标信息，修改文件名，然后点击"Download"，这样就下载了图标。
2、解压图标压缩包得到文件如下图：

3、在vue项目的src文件下新建common文件夹，将这里的frons复制到common中，再在common 文件夹中新建一个style文件夹，将这里的style.css文件复制到style文件夹中，这个css文件里放的是图标的相关样式代码。
4、style.css中@font-fae的url路径要改成正确的路径
5、然后在app.vue中引入这个文件，不然是不会生效的

/*在style标签中引入：*/
@import './common/style/style.css'

6、在template标签中的i标签写入对应的class的名字，在下载时填写的classname
可以通用类名选择器加上样式。

二、阿里巴巴矢量图标库

1、进入iconfont官网，挑选自己喜欢的图标库，然后将想要使用的图标放进购物车。
2、可以点击下载代码，也可以选择创建项目。
3、解压之后，将iconfont.css 和字体文件 copy到项目中。

4、全局引入iconfont.css，在app.vue的style标签中引入

@ import './assets/iconfont/iconfont.css'

5、在模板中引用

<i class='iconfont icon-jia''></i> 

注意：iconfont一定要加上，不然图标显示不出来。

ps:一定要所有图标挑选好了才可以打包下载，如果有两个下载包，第二个引入的css会把第一个引入的css文件覆盖掉。
图标设置大小用font-size