如何在vue的项目中导入阿里巴巴图标库

阿里巴巴矢量图标库官网:iconfont-阿里巴巴矢量图标库

选择你喜欢的图标,添加入库

点击添加至项目,并新建文件夹,点击确定

选择font-class,点击生成代码

代码生成后,在网站上打开

全选复制到style

点击复制代码,替换icon-xxx<i class="iconfont icon-xxx"></i>

最后变成<i class="iconfont icon-xihuan"></i>,就可以使用了

注:调节大小和修改颜色

调节大小(修改font-size的大小即可)

修改颜色(有色图标有时会没有颜色)

相关推荐
Gatlin19 分钟前
前端逆向与反逆向:一场猫鼠游戏的底层逻辑与实战
前端
代码煮茶22 分钟前
React 组件封装方法论 —— 以 Todo App 为例
javascript·react.js
Pedantic22 分钟前
本地通知(Local Notifications)学习笔记
前端
任沫42 分钟前
Agent之Function Call
javascript·人工智能·go
森蓝情丶1 小时前
我给 AI 搭了个法庭:一个前端仔的 LangGraph 实战全记录
前端·后端
爱勇宝1 小时前
干了近 8 年,一夜之间被裁:AI 时代,程序员最该害怕的不是 AI
前端·后端·程序员
Pedantic1 小时前
Combine 框架学习笔记
前端
runnerdancer2 小时前
Agent如何加载执行Skill的脚本
前端·agent
yingyima2 小时前
VS Code 正则替换技巧:从凌晨3点的服务器报警开始
前端
默_笙2 小时前
🛬 我让 AI 帮我写了一个打飞机游戏,结果 Canvas 把我整不会了
前端·javascript