Vue中使用icon字体图标

最新推荐文章于 2024-04-13 12:12:01 发布

原创最新推荐文章于 2024-04-13 12:12:01 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #字体图库

Vue 专栏收录该内容

37 篇文章

订阅专栏

博客介绍了在Vue项目中使用字体图标的方法。当项目无切图时，可使用阿里字体图标。具体步骤为：从阿里图标库添加下载字体库，将相关文件放于项目assets下的iconfont文件夹，修改css文件路径，在main.js引入css文件实现全局使用，最后在模板中使用字体图库。还提供了学习博客链接。

在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.youkuaiyun.com/weixin_41767649/article/details/82876246