一、svg模式
1、把字体图标文件复制到项目中
2、main.js中引入图标库
import './static/iconfont/iconfont.css';
import './static/iconfont/iconfont'
3、就可以使用了,如下
<svg class="icon" aria-hidden="true">
<use :xlink:href="`#${item.dayweatherIcon}`"></use>
</svg>
其中item.dayweatherIcon
是获取到的图标名称,如icon-xiayu
二、<i 标签,通过类名添加
1、在阿里图标库中创建自己的字体图标库
a、找到自己想要的图标加入购物车
b、打开购物车,将购物车里的图标添加到项目库,可以新建项目
c、将字体图标下载到本地
2、项目中使用
a、将下载好的文件解压,在assets/styles下新建iconfont文件夹,并放入解压好的文件
b、main.js
中引入字体图标
//引入阿里字体图标
import '@/assets/styles/iconfont/iconfont.css'
c、在项目中,鼠标复制该图标的类,然后在项目中使用
<i class="iconfont icon-paomadeng_fuzhi" style="color: gray;font-size: 30px"></i>