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

第一种：

步骤一：

打开阿里巴巴矢量图标库官网：iconfont-阿里巴巴矢量图标库

找到你要的图标，把它们依次加入到你的购物车。

步骤二：

在购物车把它们添加到对应的项目中

在我的项目中，把图标下载到本地。

下载的文件内容如下：

在vue的assets文件夹下创建icon文件夹，将下载的文件放入这个文件夹下

在main.js中引入import './assets/icon/iconfont.css'，这样子就可以在vue项目中使用你下载的svg图标

在vue中可以写<span class="icon iconfont icon-right"></span>就可以正常显示iconfont图标，修改的时候只需要修改icon-right这个class就可以了，这个class名称可以在font class中看到

如果后期想再添加图片在iconfont.css拷贝过来添加到项目上

每次新增图标后都要覆盖一次资源文件

第二种：单个添加图标

1.点击生成在线链接，复制以下代码：

2.在要显示图标的项目代码的css文件中添加以下代码：

@font-face {
  font-family: 'iconfont';  /* Project id 360936 */
  src: url('//at.alicdn.com/t/font_360936_mqv3e6qc4p.woff2?t=1625449512365') format('woff2'),
       url('//at.alicdn.com/t/font_360936_mqv3e6qc4p.woff?t=1625449512365') format('woff'),
       url('//at.alicdn.com/t/font_360936_mqv3e6qc4p.ttf?t=1625449512365') format('truetype');
}
.iconfont{
  font-family:"iconfont" !important;
  font-size:16px;font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
.icon-love::before {
  content:'\f285'
}

注意：content:'\f285'中的“\f285”对应每个icon的编码，如下图所示：

常见的问题一：

问题：

uniapp项目在app.vue中引入@import '@/common/iconfont/iconfont.css';，项目会报以下错误：

文件查找失败：'./iconfont.woff2?t=1656986652946' at App.vue:5

解决方案：

在iconfont.css中将引入字体文件的路径更换为绝对路径