Vue中使用icon字体图标

在Vue项目中，有时候如果没有切图的话，就可以使用字体图标，比如：阿里字体图标。

使用方法：

1.去阿里图标库中添加和下载对应的字体库，下载解压之后的文件内容。

2.在Vue项目的assets文件夹下创建一个iconfont文件夹，然后把iconfont.css，iconfont.svg，iconfont.ttf，iconfont.woff,iconfont.woff2文件放在这个文件夹下。

3.修改iconfont.css文件中的路径，修改成相对路径。

4.在main.js中，引入iconfont.css文件，这样，就可以全局使用。

import './assets/iconfont/iconfont.css';

5.在模板中使用，字体图库。

//iconfont ->通用的一个字体样式 主要是 font-family设置  icon-shuaxin->字体图库的名字
 <span :class="['iconfont','icon-shuaxin','refreshBtn']"></span>

.iconfont {
  font-family: "iconfont" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

学习博客：

https://www.iconfont.cn/

https://www.jqhtml.com/45617.html

https://blog.csdn.net/weixin_41767649/article/details/82876246