Vue + elementUI使用阿里icon的简单用法

最新推荐文章于 2023-09-11 15:37:56 发布
最新推荐文章于 2023-09-11 15:37:56 发布
阅读量478 收藏
点赞数
文章标签： elementui vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42795507/article/details/127009529
版权

1.当需要使用设置好颜色的icon时，要将字体格式 '彩色’勾选；
在这里插入图片描述

2.在项目的public —> index.html 如下引入
在这里插入图片描述

3.在使用的地方如下使用：
切记一定要加iconfont ，图标前要加 'icon-' 

<i class="iconfont icon-folderOpen-copy"></i>

大功告成~

在这里插入图片描述

Nedaf
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue lic在element-ui中使用阿里巴巴矢量图标库iconfont图标
Yueqin0512的博客
05-18 844
点击——>阿里巴巴矢量图标库官网 登录 将图片添加入库 购物车中查看，添加至项目 下载至本地，解压文件夹 文件夹中含有以下文件 将此文件夹重命名并放入项目文件-src-assets文件夹中 在main.js中导入图标库的css文件 import './assets/yonghu/iconfont.css' 复制图标名字，使用element-ui插入 prefix-icon前置图标，添加固定类iconfont，以及复制下来的图标代码名称icon-yongh
在vue、element-ui项目中使用iconfont
CH_Y的博客
10-25 490
在vue、element-ui项目中使用iconfont一、iconfont是什么？二、使用步骤1.访问iconfont网页2.下载图标3.打包4.使用5.举例 一、iconfont是什么？ iconfont是用字体文件取代图片文件，来展示图标、特殊字体等元素的阿里巴巴MUX倾力打造的矢量图标管理、交流平台。设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。 二、使用步骤 1.访问iconfont网页 链接: https:/
vue+element 使用iconfont (阿里图标库)
m0_57364615的博客
11-23 1547
步骤一(找到自己要引入的图标,如果已经找到只是不会引入,请直接查看步骤二): 准备:首先进入阿里图标库,登录自己的账号,在下图位置输入想搜索的图标,例如:'退出' 随便选一个自己想要的如图 把鼠标移动到该图标,点击悬框的购物车,如下图,(如果还需要其他图标可以重复以上两个步骤,选择多个加入) 点击购物车 点击添加至项目,点击新建项目,随便起名字,然后点击确定 左边的箭头就是你刚刚起名字的项目,1.2.3分别是三种icon的引入方式(如下图),今天我们用2的方式,也就是...
vue、element ui使用阿里图标库iconfont的教程
qq_35859392的博客
10-11 173
vue、element ui使用阿里图标库iconfont的教程 转载自https://blog.csdn.net/qq_32113629/article/details/79740949   posted @ 2018-10-11 10:51 或许这就是生活 阅读(...) 评论(...)...
iconfont—阿里图标的使用
A____t的博客
05-05 2700
阿里图标库在项目开发过程中的应用！！！
基于Spring Boot+Vue+ElementUI的人力资源管理系统源码+项目说明+数据库+文档.zip
最新发布
03-05
基于Spring Boot+Vue+ElementUI的人力资源管理系统源码+项目说明+数据库+文档.zip高分通过项目，已获老师指导。本项目是一套基于SpringBoot的人力资源管理系统，主要针对计算机相关专业的正在做毕设的学生和需要项目...
基于vue + elementUI的管理系统模板
02-22
3. **基于Vue + ElementUI的管理系统模板**： - **路由管理**：通常会使用Vue Router进行页面路由管理，实现单页应用（SPA）的页面跳转和参数传递。 - **状态管理**：Vuex是Vue.js的状态管理模式，用于集中管理...
Vue+ElementUI使用vue-pdf实现预览功能
10-15
主要为大家详细介绍了Vue+ElementUI使用vue-pdf实现预览功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于SpringBoot+Vue+ElementUI的人事管理系统
01-12
《构建基于SpringBoot+Vue+ElementUI的人事管理系统》 在现代企业信息化管理中，人事管理系统扮演着至关重要的角色，它能有效提升人力资源管理效率，规范工作流程，降低运营成本。本文将详细介绍如何利用SpringBoot...
Java毕业设计-基于SpringBoot+Vue+ElementUI 前后端分离的人力资源管理系统（源码+数据库脚本）.zip
07-08
本项目是一套基于SpringBoot+Vue前后端分离的人力资源管理系统，主要针对计算机相关...使用Vue和ElementUI来实现前端功能，包括界面设计、数据展示、表单提交等。以下是一个示例代码，用于展示员工信息的列表和表单：
Vue中使用ElementUI使用第三方图标库iconfont的示例
10-17
主要介绍了Vue中使用ElementUI使用第三方图标库iconfont的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue Element使用icon图标教程详解(第三方)
08-28
element-ui自带的图标库不够全，还是需要需要引入第三方icon。下面小编给大家带来了Vue Element使用icon图标教程，感兴趣的朋友一起看看吧
vue element项目引入icon图标的方法
12-07
为了减少页面的加载速度,提高用户体验,对于一些图片决定使用图标代替,但是发现element-ui的图标少得可怜,完全满足不了我的要求,于是决定在element-ui的项目里引入第三方的图标库. 因为阿里巴巴海量的图标,所以决定引入阿里巴巴的图标库 阿里巴巴图标网站: http://www.iconfont.cn/ 下面具体介绍如何使用 1.注册一个阿里巴巴账号,搜索自己需要的图标,添加到购物车,然后点击添加到项目,如果没有项目就需要创建.   2.点击添加到项目后,选中第二个   3.点击更多操作里面的编辑,注意前缀的设置，后面的命名不能和element里面的发生冲突  
在Vue+Element ui 项目中如何使用iconfont（阿里图标库）中的图标
weixin_43181470的博客
12-27 872
在项目过程中，element ui 中自带的图标往往满足不了自己的需求，那么如何在项目中使用iconfont的图标呢？在项目中src文件夹下，新建iconfont文件夹，将上面拿到的压缩包的文件复制到iconfont里面。找到自己想要的图标，加入购物车，加入完成后点击购物车，把图标添加至项目。6. 然后根据iconfont.css中的内容，去引入对应的图标。找到项目的main.js文件，引入iconfont.css样式。压缩包里有些文件是没有用的，比如demo的文件可以直接删除。
阿里矢量icon的用法步骤
weixin_44207118的博客
11-26 895
第一步，找到喜欢的icon图标添加至购物车。 添加至项目，如下图然后下载至本地，然后解压缩，将压缩出来的文件复制到vscode中assets文件夹下 第二步 在main.js中引用 import ‘./assets/iconfont/iconfont.css’; 第三步在代码中使用类名或者使用unicode编码 或 3 ...
阿里巴巴iconfont的简单使用
pleasecallme_522的博客
10-16 6868
今天写作业的时候，遇到了这样一个问题： 很明显，需要用到四个图标。其实上一次整理过一篇关于奥森图标使用方法的博客，今天也第一个想到去奥森图标的官网去找找看。可是奥森图标网站没有检索功能，我就那样一页一页地找啊，差点瞅瞎了我的超级无敌卡姿兰大眼睛也没找到（也许是我不会搜索，反正我是没找见在哪搜）。。。后来就又想到了老师之前介绍过的阿里巴巴iconfont，现将使用方法总结如下：1.阿里巴巴iconf
Vue3+ElementPlus项目使用iconfont阿里图标
qq_45438471的博客
09-11 3654
回顾一下上篇文章的内容，Element UI 使用的是阿里巴巴的图标库，通过字体图标的用法（即使用 el-icon-xxx 的类名）来引入图标。。而Element Plus 抛弃了字体图标的用法，而直接使用了 svg 图标。   那么在Element Plus框架内使用阿里图标又该如何实现？本篇文章就是讲述Vue3+ElementPlus项目使用iconfont阿里图标的方法。
如何使用阿里图标
kk的博客
12-14 1959
我们今天来看看市面最火的阿里图标库是如何使用的？​ 使用可以利用i标签或者span标签，添加类名，其中一个类名是固定的 iconfont ，另一个类名是icon-所需要的类名。​ 项目新建完成后,往项目里添加我们要想使用的图标,找到图标库,搜索一个想要的图标,然后添加到购物车;​ 找到资源管理，创建一个属于自己的项目(这个项目主要用来存放自己的图标)一个类名是固定的 iconfont ，另一个类名是icon-所需要的类名。​ 进入到自己的项目中，将图标下载到本地，然后解压。今天来聊一聊阿里图标库怎么使用?
element icon图标用法
otter_9527的博客
05-10 1861
element icon图标用法 2.直接使用 SVG 图标。3.下载成PNG使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值