element UI -- 引入第三方图标

最新推荐文章于 2024-08-07 15:42:52 发布
最新推荐文章于 2024-08-07 15:42:52 发布
阅读量1.9k 收藏 4
点赞数 4
分类专栏： 前端 element 文章标签： element
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bobobocai/article/details/87707289
版权
这篇博客介绍了如何在Element UI项目中引入并使用阿里巴巴矢量图标库的图标。步骤包括登录图标库，选择所需图标，下载到本地，创建项目中的icon文件夹，将图标文件放入，并修改iconfont.css，最后在main.js中引入样式。
摘要由CSDN通过智能技术生成

一、登录阿里巴巴矢量图标库 https://www.iconfont.cn/
在这里插入图片描述
二、选择需要的图标，添加至项目
在这里插入图片描述
在这里插入图片描述
三、进入我的项目，下载图标至本地
在这里插入图片描述
在下载之前编辑项目在这里插入图片描述
在这里插入图片描述

四、点击下载到本地 会下载一个download.zip

五、在src/assets 下 新建一个 icon文件夹，把解压后的文件放到icon文件夹

六、打开iconfont.css

添加 代码

	[class^=
最低0.47元/天 解锁文章
bobobocai
关注
专栏目录
vue+element-ui项目引入第三方图标库：阿里巴巴矢量图标库（问题：小方框）
绝圣弃智-零的博客
04-23 5966
因为element-ui内置的小图标非常有限，所以有时候，我们需要自定义或引入第三方图标库。 先介绍下阿里巴巴矢量图标库iconfont： 这个截图只显示了第一行的图标库，还有很多。 也许，我们需要的，这里都有。 有一点比较遗憾的是，不能直接下载图标库，只能一个个的添加入库（放入购物车，不花钱），加入项目（或新建项目并将入库的小图标加入项目），然后配置下载。 配置的主要是项目名称和图...
【Vue】 element ui 引入第三方图标
热门推荐
而浮生若梦，为欢几何
10-19 5万+
一·背景 最近一个项目用到 vue 和 element ui开发前端。感觉方式引入png图标比较鸡肋，所以决定把图标整合到element ui。截止目前为止国内外网络上的的相关教程没超过5篇，而且都不详细，即使全部阅读后总结也不能正常引入第三方图标，所以决定写一篇引入引入第三方图标的教程。 二· 1·基于阿里巴巴矢量图标库的一篇教程，地址;http://www.iconfont.cn/ 2
使用阿里巴巴矢量图标库扩展element图标
最新发布
qq_51588002的博客
08-07 234
使用阿里巴巴矢量图标库扩展element图标或者自己上传svg图片步骤相同
ElementUI中引入图标
小柒的前端之旅
03-14 3083
下载element-ui库 npm install --save-dev element-ui 在入口文件引入 import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' 如果碰到图标不显示，检测下载的版本与当面版本是否一致。 ...
ElementUI：项目中引入自己的ICON
2401_83817971的博客
03-29 1567
二、 点击右上角购物车三、 将图标添加至项目四、 点击右上角更多操作中的编辑项目五、 修改前缀，与ElementUI自带的前缀相同el-icon-六、 下载到本地七、 将需要的文件引入到项目中八、 修改iconfont.css，注意class与font-family要与自己的对应important;/* 以下内容参照第三方图标库本身的规则 */
element-ui及第三方图标库font-awesome的安装使用
W2398439780的博客
10-25 1877
npm install element-ui 安装。下载的组件都被放在了node_modules下面。终端 ctrl+c 输入Y ，回车终止项目。把要使用的控件的代码粘贴下来。可以看见自动添加了相关依赖。导入注册就能够使用了。
vue element项目引入icon图标的方法
08-27
因此，引入第三方图标库成了必然的选择。 阿里巴巴图标库 阿里巴巴图标库是中国最大的图标库，提供了丰富的图标资源。开发者可以注册阿里巴巴账号，搜索需要的图标，添加到购物车，然后点击添加到项目。如果没有...
Vue中使用ElementUI使用第三方图标库iconfont的示例
10-17
在Vue.js项目中集成ElementUI和第三方图标库iconfont的示例主要涉及几个关键步骤。首先，要选择一个图标库，本例中使用的是阿里巴巴的iconfont图标库。其次是将所需图标添加到项目中，并进行一些必要的配置，包括...
Vue：ElementUI怎么引入外部svg图标
xuxuan1997的博客
06-28 9293
推荐阿里巴巴图标库 命令行运行npm install svg-sprite-loader 创建icons/svg文件夹 将svg文件放在该文件夹厦门 在components文件夹中创建svgiconfont.vue文件 文件内容： <template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName"></use> </svg> &lt
android漂亮的登录ui_Vue项目中使用element-ui 并引入第三方图标库
weixin_39822728的博客
10-28 541
1、安装npm install element-ui --save-dev2、在main.js文件中引入import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI);3、上面两步完成后，就可以在项目任意的组件中使用element-ui的组件了，具体使用方法，详...
element-ui 引入图片的两种方式
alokka的博客
01-19 4248
1. require 引入 <template> <img :src="require('@/images/lokka.png')"> </template> <script> export default { data () { return { } } } </script> 2. import 引入 <template> <img :src="imageSrc"> </template> &
element ui Tree 插入图片
weixin_45966674的博客
03-03 536
<template> <div id="app"> <el-tree :data="deptOptions" ref="tree" default-expand-all > <span class="custom-tree-node" style="display:flex;align-items: center;" slot-sco
Vue（四）：element-ui组件用法、表单验证、图标引入、webpack目录配置指向、export暴露方法
Start_Simple的博客
03-12 2228
element按需安装、正则表达过滤字符、iconfont下载本地、import引用
Vue ElementUI图片引入注意事项
Trainer2107的博客
10-03 171
【代码】Vue ElementUI图片引入注意事项。
vue element-ui引入第三方图标 在线版
Toozky的博客
03-19 2146
参考链接：Vue Element-UI使用icon图标(第三方)–在线版 - 简书 vue项目版本为vue3 打开iconfont-阿里巴巴矢量图标库，注册登录之后回到首页 在首页顶部菜单 图标管理>我的项目 点击新建项目 新建项目 项目名称随意 记住设置的前缀，一会儿要用 去图标库里搜索选择自己需要的图标 加入到购物车 点击菜单栏上的购物车 添加至项目 选择刚才创建的项目 点击确定 跳转至项目页 点击Font class 鼠标箭头放到图标上可以更改名称 点击生成代码并复制 在vue项
如何在前端项目中单独引入 ElementUI 图标以及使用
都随它大小便吧
01-18 8375
首先 element-ui 图标是基于字体文件的的形式实现的，如woff和ttf等。有时候一些需求用CSS的before和after为元素实现，自然用到 content 属性，而这个content不仅仅可以承载空格，还可以承载字符编码的。
Vue Element使用icon图标(第三方)
zhaosisi0922的博客
11-22 293
element-ui自带的图标库还是不够全，还是需要需要引入第三方icon，自己在用的时候一直有些问题，参考了些教程，详细地记录补充下 对于我们来说，首选的当然是阿里icon库 教程转发https://www.jianshu.com/p/59dd28f0b9c9 ...
element-ui图标不显示
07-27
其他自定义的样式或第三方库的样式可能会影响到 element-ui 的图标显示。您可以尝试在项目中暂时禁用其他样式，看看是否能够正常显示图标。 5. 确保使用了支持字体图标的字体文件格式。element-ui 使用了字体图标来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值