IconFont网站里有成批的设计完善的图标，可供我们在网页中使用。下面介绍下如何将图标下载至本地然后在Vue项目中使用。
（1）新建项目（已有可跳过），在IconFont网站上的图标库中搜索自己需要的图标，选好后添加入库。
（2）选好后，在项目里，点下载至本地。
图1 项目中包含的图标
(3) 将下载至本地的图标文件夹解压，将图2中标出的4个文件复制到本地项目src/assets/styles/iconfont 目录下。
图2 要放置到 iconfont 目录下的4个文件
（4）将图2中的iconfont.css复制到本地项目src/assets/styles目录下，并在此文件中，修改.eot .svg .ttf .woff对应文件的目录路径，如图3所示，否则将找不到这些文件而报错。
图3 修改相关文件的路径
（5）在Vue项目入口文件main.js中引入iconfont.css文件
图4 添加css文件
（7）在具体的组件中使用iconfont图标，如图5所示，其中下划红线的代码在iconfont网站对应项目图标里可找到直接复制，如图6所示。
图5 添加iconfont图标
图6 复制图标代码
