在Vue+Element ui 项目中如何使用iconfont（阿里图标库）中的图标

最新推荐文章于 2024-03-02 15:16:21 发布
最新推荐文章于 2024-03-02 15:16:21 发布
阅读量905 收藏
点赞数
分类专栏： Vue 文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43181470/article/details/128455514
版权

在项目过程中，element ui 中自带的图标往往满足不了自己的需求，那么如何在项目中使用iconfont的图标呢？

  1. 在iconfont中新建一个项目在这里插入图片描述

  2. 找到自己想要的图标，加入购物车，加入完成后点击购物车，把图标添加至项目在这里插入图片描述
    在这里插入图片描述

  3. 把图标的压缩包文件下载到本地
    在这里插入图片描述
    压缩包里有些文件是没有用的，比如demo的文件可以直接删除

  4. 在项目中src文件夹下，新建iconfont文件夹，将上面拿到的压缩包的文件复制到iconfont里面
    在这里插入图片描述

  5. 找到项目的main.js文件，引入iconfont.css样式

在这里插入图片描述
6. 然后根据iconfont.css中的内容，去引入对应的图标
在这里插入图片描述
在这里插入图片描述

肖小周
关注
专栏目录
vue lic在element-ui中使用阿里巴巴矢量图标库iconfont图标
Yueqin0512的博客
05-18 866
点击——>阿里巴巴矢量图标库官网 登录 将图片添加入库 购物车中查看，添加至项目 下载至本地，解压文件夹 文件夹中含有以下文件 将此文件夹重命名并放入项目文件-src-assets文件夹中 在main.js中导入图标库的css文件 import './assets/yonghu/iconfont.css' 复制图标名字，使用element-ui插入 prefix-icon前置图标，添加固定类iconfont，以及复制下来的图标代码名称icon-yongh
Vue项目Element-UI中使用阿里字体图标库
Liang_Shun的博客
06-17 844
第一步：下载字体图标 选择好要下载的字体图标后 点击下载代码，得到一个压缩包 第二步 解压后将文件夹放到项目src/assets中 第三步 打开解压后的文件夹中的demo——index.html 可选fontclass引用 在项目入口文件main.js中导入字体图标 iconfont.css // 导入字体图标 import './assets/fonts/iconfont.css' 最...
【Element-ui】Icon 图标与Button 按钮
热门推荐
m0_62599305的博客
12-02 2万+
在前端开发中，界面的设计和交互是至关重要的一部分。一个直观、易用的界面往往离不开各种组件的运用。本文将聚焦于Element-ui中的两个常用组件——Icon图标和Button按钮，分别介绍它们的基本用法和一些实用技巧。Icon图标为界面添加了更多的元素，而Button按钮则是用户与页面进行交互的重要媒介，通过深入理解它们，我们可以更好地打造出美观、实用的前端界面。在本文中，我们深入了解了Element-ui中的Icon图标和Button按钮的基本用法和实用技巧。
ElementUI图标少，引入阿里矢量图标
u012820292的博客
05-24 1263
9、在项目目录下，src > assets > icon （创建个icon文件，名字可以随意取），将上面剩余的文件全部拷到这个icon文件夹下。3、项目名称随便写，但是不要写el-icon开头，因为和ElementUI内的图标重名，可能导致用不了。也就是复制el-icon-musicgeci注意前面的.和后面的:都不要复制， 我们在要引用的地方加个div标签，里面套个i标签试一下。记录一下自己成功的步骤，很多是从网上找的，但是网上的写的很散，看一个成功不了，我综合了两篇文章写的。
在vue、element-ui项目中使用iconfont
CH_Y的博客
10-25 652
在vue、element-ui项目中使用iconfont一、iconfont是什么？二、使用步骤1.访问iconfont网页2.下载图标3.打包4.使用5.举例 一、iconfont是什么？ iconfont是用字体文件取代图片文件，来展示图标、特殊字体等元素的阿里巴巴MUX倾力打造的矢量图标管理、交流平台。设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。 二、使用步骤 1.访问iconfont网页 链接: https:/
Vue开发实例（四）Element-UI部分组件使用方法
最新发布
Daniel
03-02 2731
ElementUI部分组件的使用方法，Icon、Button、Link等，其他的参考官网：https://element.eleme.cn/#/zh-CN/component/installation
Vue中使用ElementUI使用第三方图标库iconfont的示例
10-17
首先，要选择一个图标库，本例中使用的是阿里巴巴的iconfont图标库。其次是将所需图标添加到项目中，并进行一些必要的配置，包括修改图标的前缀以及引入图标样式到Vue项目中。以下是对上述过程的详细说明： 1. 访问...
vue项目引入Iconfont图标库的教程图解
10-17
首先，你需要访问阿里图标库（Iconfont）网站，挑选你所需要的图标。在浏览图标时，你可以将需要的图标加入购物车。如果你在一个图标库中找不到所需图标，可以在其他库中继续搜索，但记得在离开时将图标添加到你的...
vue+element-ui项目引入第三方图标库：阿里巴巴矢量图标库（问题：小方框）
绝圣弃智-零的博客
04-23 5959
因为element-ui内置的小图标非常有限，所以有时候，我们需要自定义或引入第三方图标库。 先介绍下阿里巴巴矢量图标库iconfont： 这个截图只显示了第一行的图标库，还有很多。 也许，我们需要的，这里都有。 有一点比较遗憾的是，不能直接下载图标库，只能一个个的添加入库（放入购物车，不花钱），加入项目（或新建项目并将入库的小图标加入项目），然后配置下载。 配置的主要是项目名称和图...
Vue + elementUI使用阿里icon的简单用法
Nedaf博客
09-23 504
通过cdn简单使用阿里icon
【Vue】 element ui 引入第三方图标
lxlmycsdnfree的博客
10-17 938
最近一个项目用到 vue 和 element ui开发前端。使用element ui自带的icon太少，所以引入第三方的。截止目前为止国内外网络上的相关教程我搜索到没超过5篇，而且都不详细，即使全部阅读后总结也不能正常引入第三方图标，所以决定写一篇引入引入第三方图标的教程。 1·基于阿里巴巴矢量图标库的一篇教程，地址;http://www.iconfont.cn/ 2·进入网站登录账户后，新建...
在vue框架下element-ui两种引用阿里云图标库的方法
weixin_69556696的博客
04-24 1298
2.打开链接后复制代码，在刚才放src/accent文件夹下创建css文件放入复制的代码然后在main.js文件中声明。下载解压放入src的文件中， 要在main.js文件中声明引入压缩包中的iconfont.css文件。第一种方法是下载到本地或者自己的服务器稳一点，但是如果要更新要再次下载，重新引入。第二种方法是使用在线连接，更新只要在阿里云更新一下代码再次拉入css文件就可以。可以看到第一步是引入css文件，我们在main.js文件中已经引用。类名和一个特有的类名和自己的设置有关。
scrapy如何指定生成python3的项目_如何把阿里图标库的图标生成代码并应用于自己的项目...
weixin_39747087的博客
10-28 156
有时候需要用很多图标去完成一定的页面效果和工作展现，框架内置的图标可能满足不了我们的需求，有个很好的图标库想必大家都知道-----就是阿里图标库。那么我们如何才能够把阿狸图标库的图标引用到自己的项目中呢？耐着性子往下看吧！阿里图标库地址：https://www.iconfont.cn/1.根据所需搜索到想要的图标，鼠标悬停，点击添加到购物车1.png2.点击购物车2.png3.点击添加至项目3.p...
关于elementui引入第三方icon
Acun_l的博客
12-16 1181
elementui
element-ui使用阿里矢量图标
业余前端的职业经历
01-01 4450
其实我们在工作中，很多时候ui给我们的图标可能就是从阿里图标库中拿来的 如果你用elemnt-ui写项目的时候 如果要用到很多图标 <el-button type="primary" icon="el-icon-search">搜索</el-button> <i class="el-icon-edit"></i> <i class...
如何在Vue+ElementUI项目中使用iconfont图标库
weixin_46073538的博客
10-24 5929
iconfont官网iconfont中有许多样式的图标可以给我们使用。什么是SVG格式？SVG是一种图形文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。
element 中使用自定义图片icon图标
qq_43235503的博客
04-04 3493
element 中使用自定义图片icon图标
element icon图标用法
otter_9527的博客
05-10 1947
element icon图标用法 2.直接使用 SVG 图标。3.下载成PNG使用。
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、付费专栏及课程。

余额充值