学习记录420@vue element-ui 引入阿里巴巴图标库

最新推荐文章于 2023-05-24 19:23:45 发布
最新推荐文章于 2023-05-24 19:23:45 发布
阅读量142 收藏
点赞数
文章标签： Iconfont Vue项目 图标库 资源下载 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44663675/article/details/117626290
版权

网址：阿里巴巴图标库
进入网页
在这里插入图片描述
登录个人账户
在这里插入图片描述
创建项目
在这里插入图片描述
在这里插入图片描述
选择图标，先加入购物车，在加入项目
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
我的项目下载到本地
在这里插入图片描述
解压，并命名为font，将这个文件夹放入到vue项目–assets中
在这里插入图片描述
main.js中引入
在这里插入图片描述
使用
在这里插入图片描述
iconfont是必须的，后面跟的名字可在项目中查看
在这里插入图片描述
或者在项目中查看
在这里插入图片描述
打开后是一样的方法
在这里插入图片描述最后结果
在这里插入图片描述

教练 我想学编程
关注
vue lic在element-ui中使用阿里巴巴矢量图标库iconfont图标
Yueqin0512的博客
05-18 881
点击——>阿里巴巴矢量图标库官网 登录 将图片添加入库 购物车中查看，添加至项目 下载至本地，解压文件夹 文件夹中含有以下文件 将此文件夹重命名并放入项目文件-src-assets文件夹中 在main.js中导入图标库的css文件 import './assets/yonghu/iconfont.css' 复制图标名字，使用element-ui插入 prefix-icon前置图标，添加固定类iconfont，以及复制下来的图标代码名称icon-yongh
vue+element-ui项目引入第三方图标库：阿里巴巴矢量图标库（问题：小方框）
绝圣弃智-零的博客
04-23 5978
因为element-ui内置的小图标非常有限，所以有时候，我们需要自定义或引入第三方图标库。 先介绍下阿里巴巴矢量图标库iconfont： 这个截图只显示了第一行的图标库，还有很多。 也许，我们需要的，这里都有。 有一点比较遗憾的是，不能直接下载图标库，只能一个个的添加入库（放入购物车，不花钱），加入项目（或新建项目并将入库的小图标加入项目），然后配置下载。 配置的主要是项目名称和图...
ElementUI图标少，引入阿里矢量图标
最新发布
u012820292的博客
05-24 1277
9、在项目目录下，src > assets > icon （创建个icon文件，名字可以随意取），将上面剩余的文件全部拷到这个icon文件夹下。3、项目名称随便写，但是不要写el-icon开头，因为和ElementUI内的图标重名，可能导致用不了。也就是复制el-icon-musicgeci注意前面的.和后面的:都不要复制， 我们在要引用的地方加个div标签，里面套个i标签试一下。记录一下自己成功的步骤，很多是从网上找的，但是网上的写的很散，看一个成功不了，我综合了两篇文章写的。
vue+element引入阿里巴巴第三方图标库
辰小白
04-14 2850
1.在阿里巴巴图标库创建自己的工程，并导入需要的图标放入项目 关于如何批量选择图标： F12输入—— var iconList = document.querySelectorAll('.icon-gouwuche1'); for (var i = 0; i < iconList.length; i++) { iconList[i].click(); } 2.下载项目至...
vue+element-ui项目内使用阿里图标库
DOM曼珠沙华的博客
06-11 2385
项目内可能会经常涉及到图标使用的问题，我比较常用的是阿里的图标库。 要使用图标的话，需要先对图标进行下载，下面是下载图标库及使用的步骤： 获取图标 1.需要进入到阿里图标矢量库官网，点击我的项目：
vue引入阿里图标
高山景行，一尘不染
11-09 622
在阿里矢量图官网，下载代码 下载下的目录用这几个： 然后再main.js引入 import './assets/icon/iconfont.css' 使用方法： &lt;i class="iconfont icon-gouwuche"&gt;&lt;/i&gt; 展示效果：  ...
在vue框架下element-ui两种引用阿里云图标库的方法
weixin_69556696的博客
04-24 1309
2.打开链接后复制代码，在刚才放src/accent文件夹下创建css文件放入复制的代码然后在main.js文件中声明。下载解压放入src的文件中， 要在main.js文件中声明引入压缩包中的iconfont.css文件。第一种方法是下载到本地或者自己的服务器稳一点，但是如果要更新要再次下载，重新引入。第二种方法是使用在线连接，更新只要在阿里云更新一下代码再次拉入css文件就可以。可以看到第一步是引入css文件，我们在main.js文件中已经引用。类名和一个特有的类名和自己的设置有关。
阿里小图标用以替代element-ui图标
08-10
阿里巴巴图标库（Alibaba Icon Font）是一个海量的矢量图标资源库，包含了众多精心设计的图标，涵盖了业务、设计、技术等多个领域，能够极大地丰富我们的项目视觉表现。使用阿里图标库，我们可以为Vue项目中的...
vue element项目引入icon图标的方法
08-27
阿里巴巴图标库是中国最大的图标库，提供了丰富的图标资源。开发者可以注册阿里巴巴账号，搜索需要的图标，添加到购物车，然后点击添加到项目。如果没有项目，就需要创建。 引入 Icon 图标的步骤 1. 注册阿里巴巴...
vue + element-ui 聊天_vue网页版聊天Vue+ElementUI仿微信界面聊天实例
weixin_39592315的博客
11-20 4954
vue+vuex+vue-cli+vue-router+element-ui+swiper等技术开发仿微信pc端界面聊天应用，实现了发送消息+表情(动图gif)、图片/视频预览、右键长按菜单、红包/朋友圈、截图发送等功能。技术栈vue版本：Vue2.5.6状态管理：Vuex页面路由：Vue-routericonfont图标：阿里巴巴字体图标库自定义滚动条：vue-gemini-scrol...
vue element-ui引入第三方图标
Toozky的博客
03-09 2547
参考链接Vue Element使用icon图标(第三方) - 简书 项目vue版本为vue3，按照上文重新整理的笔记 打开iconfont-阿里巴巴矢量图标库，注册登录之后回到首页 在首页顶部菜单 图标管理>我的项目 点击新建项目 新建项目 项目名称随意 记住设置的前缀，一会儿要用 去图标库里搜索选择自己需要的图标 加入到购物车 点击菜单栏上的购物车 添加至项目 选择刚才创建的项目 点击确定 跳转至项目页 点击Font class 鼠标箭头放到图标上可以更改名称 下载到本地，解压 编辑ico
前端小知识：ElementPlus引入阿里图标使用（超详细-手把手教学）
weixin_39651356的博客
12-30 2724
前端小知识：ElementPlus引入阿里图标使用（超详细-手把手教学）
vue element ui引入阿里库的图标
ting0712的博客
10-29 783
iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具https://www.iconfont.cn/ 如果element官网提供的图标不够用可以采用以下方式: 阿里图标库里新建项目,把图标加到购物车后,添加到项目,选择font class下载到本地; 项目里新建assets文件夹,icon把要的图标文件复制进去 修改iconfont.css,加以下代码,红色
Vue、Element-ui项目中如何使用Iconfont(阿里图标库)
热门推荐
棋鬼王的博客
03-29 7万+
我们使用element-ui、vue开发网站的时候，往往图标是起着很重要的作用。 2018-11-9更新 1.傻瓜式引用：由于这种方法及其简单 省去了很多繁琐的步骤， a.引入项目生成的，图标地址。 b.使用推荐使用这种，详情请看文档！！文档够详细的了。http://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4...
vue中 element-ui引入阿里巴巴图标库两种办法
zj_zj_zj_zj_zj的博客
08-16 1093
一：最初步骤,去阿里巴巴图标库。 过程：https://blog.csdn.net/mmd0308/article/details/78390783 二：配置： 1.在iconfont.css文件中将改注释的地方注释，该修改的地方修改，即可，如下图所示： 引入方式如下图两种： 效果如下图 2.iconfont.css不做任何修改 引入方式如下图 效果图：引入方式1正...
【Vue】 element ui 引入第三方图标
而浮生若梦，为欢几何
10-19 5万+
一·背景 最近一个项目用到 vue 和 element ui开发前端。感觉方式引入png图标比较鸡肋，所以决定把图标整合到element ui。截止目前为止国内外网络上的的相关教程没超过5篇，而且都不详细，即使全部阅读后总结也不能正常引入第三方图标，所以决定写一篇引入引入第三方图标的教程。 二· 1·基于阿里巴巴矢量图标库的一篇教程，地址;http://www.iconfont.cn/ 2
element-ui使用阿里矢量图标
业余前端的职业经历
01-01 4471
其实我们在工作中，很多时候ui给我们的图标可能就是从阿里图标库中拿来的 如果你用elemnt-ui写项目的时候 如果要用到很多图标 <el-button type="primary" icon="el-icon-search">搜索</el-button> <i class="el-icon-edit"></i> <i class...
vue Elementui 引入第三方icon(阿里矢量库)
jj_0628的博客
11-12 1810
在做项目的过程中，发现elementui图标比较少，根据ui好多图标都没有，被迫只能通过引入第三方图标啦，自己通过参考其他教程，整理一下过程呀 首先呢 需要去阿里矢量图库注册账号呀 接下来，需要新建项目 打开“图标管理”中“我的项目”，点击新建 emmm，填写项目名称与那个什么什么前缀，名称可以任意，需要注意前缀不可以和elementui前缀相同哦，填写完后点击新建就可以啦 继续呀， ...
vue+element 使用iconfont (阿里图标库)
m0_57364615的博客
11-23 1566
步骤一(找到自己要引入的图标,如果已经找到只是不会引入,请直接查看步骤二): 准备:首先进入阿里图标库,登录自己的账号,在下图位置输入想搜索的图标,例如:'退出' 随便选一个自己想要的如图 把鼠标移动到该图标,点击悬框的购物车,如下图,(如果还需要其他图标可以重复以上两个步骤,选择多个加入) 点击购物车 点击添加至项目,点击新建项目,随便起名字,然后点击确定 左边的箭头就是你刚刚起名字的项目,1.2.3分别是三种icon的引入方式(如下图),今天我们用2的方式,也就是...
Vue Element UI整合阿里图标库实战教程
"Vue Element如何引入并使用第三方图标库阿里icon" 在开发Vue项目时，Element UI虽然提供了丰富的图标库，但有时仍无法满足所有的需求。此时，引入第三方图标库，如阿里icon，是一个不错的选择。以下是使用阿里icon...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值