vue项目引入iconfont(阿里巴巴矢量图标库)

阿里巴巴矢量图标网址：https://www.iconfont.cn

一、方式1:项目中使用usicon引用图标

1.下载代码

选择图标加入项目中后，下载图标代码

下载后解压

2.Vue项目中，引入下载的图标文件

将刚下载解压后的文件中的iconfont.tff文件放入styles文件中

styles文件夹新建us_icon_font.scss文件,通过文件地址引入图标文件

@font-face {
  font-family: usicon;
  src: url("iconfont.ttf?t=1694681005435") format("truetype");
}

3.VUE项目main.ts文件中全局引用样式文件

import "@/styles/us_icon_font.scss";

 4.页面中使用

<i class="us-icon" style="font-size: 24px">&#xe848;</i>