ElementUI图标少,引入阿里矢量图标

原文链接:https://blog.csdn.net/u012820292/article/details/130853248

记录一下自己成功的步骤,很多是从网上找的,但是网上的写的很散,看一个成功不了,我综合了两篇文章写的。

传送门:

阿里矢量图标

1、按步骤:注册 > 登录 > 资源管理 > 我的项目

2、新建项目

3、项目名称随便写,但是不要写el-icon开头,因为和ElementUI内的图标重名,可能导致用不了。(虽然我以el-icon开头了,但是也成功用上)

4、填完后点击新建,回到首页,搜索想要的图标,加入购物车。

如果很多都想加入,可用以下代码批量加入,代码不会加入下一页的,可以手动翻页后再执行一遍。

var icons = document.querySelectorAll('.icon-gouwuche1');

var auto_click = function(i) {

if (i < icons.length) {

setTimeout(function() {

icons.item(i).click();

auto_click(i + 1);

}, 600);

}

};

auto_click(0);

不会用?谷歌浏览器F12进开发者模式,点击Console(控制台)输入以上代码,回车键确定

5、加完后,点击右上角的购物车,选择添加至项目

6、选择最开始创建的文件夹,确定。

7、下载到本地,解压

8、 去掉不用的其他文件,蓝色的文件可以删,不删也没影响。

9、在项目目录下,src > assets > icon (创建个icon文件,名字可以随意取),将上面剩余的文件全部拷到这个icon文件夹下。

10、找一下项目里面的main.js文件,引入刚才创建的icon文件夹下的iconfont.css文件。

11、打开iconfont.css这个文件,能看到红色圈出来的图标

12、现在我们引用它,

我要引用这个,复制选中的名字,

也就是复制el-icon-musicgeci注意前面的.和后面的:都不要复制, 我们在要引用的地方加个div标签,里面套个i标签试一下

<div >

<i class="iconfont el-icon-musicgeci"></i>

</div>

效果

虽然很小,我就不管了,教程到此结束。


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

相关推荐
这儿有一堆花6 分钟前
Vue 是什么:一套为「真实业务」而生的前端框架
前端·vue.js·前端框架
全栈前端老曹20 分钟前
【MongoDB】深入研究副本集与高可用性——Replica Set 架构、故障转移、读写分离
前端·javascript·数据库·mongodb·架构·nosql·副本集
NCDS程序员1 小时前
v-model: /v-model/ :(v-bind)三者核心区别
前端·javascript·vue.js
夏幻灵1 小时前
CSS三大特性:层叠、继承与优先级解析
前端·css
小杨同学呀呀呀呀1 小时前
Ant Design Vue <a-timeline>时间轴组件失效解决方案
前端·javascript·vue.js·typescript·anti-design-vue
qq_532453531 小时前
使用 Three.js 构建沉浸式全景图AR
开发语言·javascript·ar
华玥作者9 小时前
[特殊字符] VitePress 对接 Algolia AI 问答(DocSearch + AI Search)完整实战(下)
前端·人工智能·ai
Mr Xu_10 小时前
告别冗长 switch-case:Vue 项目中基于映射表的优雅路由数据匹配方案
前端·javascript·vue.js
前端摸鱼匠10 小时前
Vue 3 的toRefs保持响应性:讲解toRefs在解构响应式对象时的作用
前端·javascript·vue.js·前端框架·ecmascript
sleeppingfrog10 小时前
zebra通过zpl语言实现中文打印(二)
javascript