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->字体图库的名字.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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！