vue 项目中使用 阿里巴巴 iconfont 图标

1、下载iconfont

• 进入图标库，可以选择自己看中的图标库或者根据关键字搜索
• 找到想要的图标，加入购物车

• 点击右上角“购物车”，可看到已选择图标，点击“下载代码”

• 下载完成后解压，会看到如下目录：

• 其中打开demo_index.html 会有使用教程
• 在所有文件中，仅有我所选择的五个文件有用，所以我只把该五个文件放入到我的项目中

2、使用iconfont

• 放入到vue项目中后，我们需要对iconfont.css进行些许改动，因为webpack打包时，里面的文件引入路径会有问题，将绝对路径改为相对路径

• 在main.js中引入

//引入iconfont
import '@/assets/style/base/iconfont/iconfont.css'

• 在文件中使用（两种方式）

1、Unicode 引用

在 demo_index.html 页面中找到字体编码，或者在官网“图标管理-我的项目”内选择“复制代码”（前提需要先添加至项目）

或者

 如下使用：

<i class="iconfont">&#xe645;</i>

2、font-class 引用

在 demo_index.html 页面中找到对应的class，或者在官网“图标管理-我的项目-Font class”内选择“复制代码”（前提需要先添加至项目）

或者

如下使用：

<i class="iconfont icon-search"></i>

两种方法看个人喜好选择使用

Iconfont 官网链接：https://www.iconfont.cn/