在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.jqhtml.com/45617.html
https://blog.csdn.net/weixin_41767649/article/details/82876246