1.注册一个阿里巴巴账号,搜索自己需要的图标,添加到购物车,然后点击添加到项目,如果没有项目就需要创建.
2.进入“我的项目”
- 自定义项目设置(默认的为icon-,iconfont),
默认使用方法:<i class=“iconfont icon-user”>
修改后:<i class=“element-icons el-iconuser”>
修改FontClass字段,里面的名称稍后我们引用这个图标的时候会用到,这部分请根据项目自行命名修改,我这里把这个图标命名为user,然后点击【仅保存】按钮:
4. 点击下载下载至本地后,将代码解压到vite项目的src/assets/iconfont目录中
- 引入和使用
引入:- 在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>