vite+element项目使用iconfont图标库中的图标

1.注册一个阿里巴巴账号,搜索自己需要的图标,添加到购物车,然后点击添加到项目,如果没有项目就需要创建.

2.进入“我的项目”

3. 自定义项目设置(默认的为icon-，iconfont),

默认使用方法：<i class=“iconfont icon-user”>

修改后：<i class=“element-icons el-iconuser”>

修改FontClass字段，里面的名称稍后我们引用这个图标的时候会用到，这部分请根据项目自行命名修改，我这里把这个图标命名为user，然后点击【仅保存】按钮：

4. 点击下载下载至本地后，将代码解压到vite项目的src/assets/iconfont目录中

5. 引入和使用
   引入：
   1. 在main.js中引入

import '@/assets/iconfont/iconfont.css'

2. 在使用的页面引用

<style >
@import "@/assets/iconfont/iconfont.css";
</style>

使用：

<i class="element-icons el-iconuser"></i>
// 没有改变项目设置中的FontClass/Symbol 前缀和Font Family，则使用以下方式调用
<i class="iconfont icon-user"></i>