vue项目使用iconfont图标方法

一、关于iconfont

iconfont矢量图标库是由阿里妈妈MUX倾力打造的矢量图标管理、交流平台。iconfont主要为icon设计师们量身打造，专注于原创图标设计，集图标搜索、下载、上传、管理等多项功能于一体，同时还能够将图标转化为字体应用，方便应用于web前端。

二、优点

1、加载文件体积小，有利于优化

2、通过改变font-size、color就能自由变换大小，修改颜色，就像控制文字一样简单

3、iconfont上有数以百万计的图标，很容易找到自己喜欢的图标

三、使用

1、打开iconfont官网选择自己喜欢的图标，并且添加到购物车

2、添加到项目，给项目随便命个名就行，确定后下载至本地

3、在项目assets文件夹下创建一个文件iconfont，将我们下载好的文件iconfont.css、iconfont.eot、iconfont.svg、iconfont.ttf和iconfont.woff放进文件iconfont中

4、在main.js中引入iconfont.css样式

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

5、在vue文件中引用

<i class="iconfont icon-shoucang yangshi"></i>

6、调整图标的大小以及颜色

.yangshi{
    font-size:20px;
    color:red;
}

7、假如报错，需要安装css-loader依赖包

npm install css-loader --save