标签：vue 项目 ali iconfont element ui icon 图标

参考链接：Vue Element-UI使用icon图标(第三方)–在线版 - 简书

vue项目版本为vue3

打开iconfont-阿里巴巴矢量图标库，注册登录之后回到首页

在首页顶部菜单 图标管理>我的项目

点击新建项目

新建项目

项目名称随意

记住设置的前缀，一会儿要用

去图标库里搜索选择自己需要的图标

加入到购物车

点击菜单栏上的购物车

添加至项目

选择刚才创建的项目

点击确定

跳转至项目页

点击Font class

鼠标箭头放到图标上可以更改名称

点击生成代码并复制

在vue项目的public/index.html里添加一个link标签，全局引入样式

在浏览器地址栏粘贴刚才复制的在线样式链接，复制.iconfont部分的样式

在vue项目的src/assets创建ali-iconfont.css文件

粘贴刚才复制的样式，并把类修改为[class^="ali-icon-"], [class*=" ali-icon-"]
注意：ali-icon-是刚才图标项目设置的前缀，class*=""里面的ali-icon-前面有一个空格

在vue项目的src/App.vue（Vue项目页面入口）中用style标签引入iconfont.css

重启vue项目

在阿里图标库的项目页复制需要使用的图标代码

---

最后使用方式和element-ui自带el-icon一样

后续添加新图标只需更新代码将public/index.html中引入的在线链接替换即可

标签：vue,项目,ali,iconfont,element,ui,icon,图标
来源： https://blog.csdn.net/u012175183/article/details/123392090

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。