Javascript

vue element-ui引入第三方图标 在线版

本文主要是介绍vue element-ui引入第三方图标 在线版,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

参考链接: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 element-ui引入第三方图标 在线版的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!