iconfont使用-优快云博客

本文链接：https://blog.youkuaiyun.com/Ajie_D/article/details/145905148

iconfont使用

1）在阿里的字体图标网站中将需要的图标添加到购物车中

在这里插入图片描述
2）将购物车中的代码添加到项目中并下载

在这里插入图片描述

3）下载后解压，内容如下
在这里插入图片描述

iconfont有三种引用方式，这里主要使用Font class

1）引入iconfont.css，要注意不要写错路径
在这里插入图片描述

2）直接调用
在这里插入图片描述

1）将解压后的文件放到src/assets这个目录里，我这里是放到了src/assets/fonts/iconfont下,具体目录根据自己的需求，但是后面全局引入iconfont.css不要写错路径。
在这里插入图片描述

2）在main.js 或者 App.vue 中全局引入字体图标的iconfont.css文件

App.vue中引用：
在这里插入图片描述

main.js 中引用（建议）：
在这里插入图片描述
3）最后在具体页面中直接使用即可

# 具体格式
<i class="iconfont icon-xxx"></i> # xxx是具体图标的名字，在demo_index.html中有

在这里插入图片描述
4）最终效果如下：