2021-10-30

vue项目中使用 icon-font 字体

1.登陆 icon-font字体图标矢量库
2. 找到心仪的图标添加到购物车
3. 然后将购物车的图标添加到项目

选择一种字体格式，我这里推荐第一种
字体图标三种格式区别（Unicode / Font class / Symbol）
3.下载 Download Code
将下载的压缩包解压到项目目录中，我这里是icons目录里（绿色框选的就是两次加载不同的icon-font压缩包）

4.在基础样式中引入icon-font

注意：·@font-face·可以直接在下载字体库的那个地方复制过来（见第一张图），然后改一下其中的url文件地址即可
5.将引入了iconfont的base.less文件引入到main.js中

6.然后就可以在页面中使用了

注意：
content的内容见第一张的位置，记得用的‘\’表示‘&#x’哦；

同一个项目，可能在开发的过程总不断增加新的图标，可以在icon-font图标库中的我的项目里重新下载，执行上面的步骤，当然也可以将不同项目下载的字体压缩包分别解压来做（如图二的绿色框），只不过需要相应的添加一个·@font-face·

然后就可以在页面看到图标了。