element ui怎么结合阿里图标库

最新推荐文章于 2023-12-02 17:52:25 发布
最新推荐文章于 2023-12-02 17:52:25 发布
阅读量480 收藏 1
点赞数
分类专栏： vue element ui 文章标签： 图标添加
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42852004/article/details/89881513
版权
工作需求：因为element ui 图标库提供的图标比较少，因此需要引入图标库来弥补这一缺陷

成果展示：

在这里插入图片描述

第一步：

阿里图标库链接：
https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
点击购物车，注册新的项目，命名为test
在这里插入图片描述

第二步：点击"下载至本地"

在这里插入图片描述

第三步：将本地test文件夹中的icon放入vue cli脚手架中的asset目录下

在这里插入图片描述

第四步：在main.js中引入全局

在这里插入图片描述

第五步：在按钮前引入

在这里插入图片描述

我是顾昀峰
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue中使用ElementUI使用第三方图标库iconfont的示例
10-17
主要介绍了Vue中使用ElementUI使用第三方图标库iconfont的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue+element-ui项目引入第三方图标库：阿里巴巴矢量图标库（问题：小方框）
绝圣弃智-零的博客
04-23 5836
因为element-ui内置的小图标非常有限，所以有时候，我们需要自定义或引入第三方图标库。 先介绍下阿里巴巴矢量图标库iconfont： 这个截图只显示了第一行的图标库，还有很多。 也许，我们需要的，这里都有。 有一点比较遗憾的是，不能直接下载图标库，只能一个个的添加入库（放入购物车，不花钱），加入项目（或新建项目并将入库的小图标加入项目），然后配置下载。 配置的主要是项目名称和图...
Vue项目中使用element-ui，并引入第三方图标库iconfont
sleepwalker_1992的专栏
09-23 2万+
element-ui官网 1、安装 npm install element-ui --save-dev 2、在main.js文件中引入 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); 3、上面两步完成后，就可以在项目任意的组件中...
ElementUI 图标Icon
热门推荐
爱喝水的qdy的博客
11-17 4万+
目录官方地址使用方法图标集合 官方地址 https://element.eleme.io/#/zh-CN/component/icon 使用方法 直接通过设置类名为 el-icon-iconName 来使用即可。 图标集合 el-icon-platform-elemeel-icon-elemeel-icon-delete-solidel-icon-deleteel-icon-s-t...
定制化图标——Element UI 组件图标替换指南
Blog of Leviash
09-14 3271
本篇博客将介绍如何在使用 Element UI 组件时对原生图标进行定制化替换，提供了适用于满足个性化需求的方法和技巧。
如何在Vue+ElementUI项目中使用iconfont图标库
weixin_46073538的博客
10-24 5498
iconfont官网iconfont中有许多样式的图标可以给我们使用。什么是SVG格式？SVG是一种图形文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。
Element UI中全部的图标以及组件
马志武的博客
02-20 962
Element UI中全部的图标以及组件。
前端小知识：ElementPlus引入阿里图标使用（超详细-手把手教学）
weixin_39651356的博客
12-30 2342
前端小知识：ElementPlus引入阿里图标使用（超详细-手把手教学）
阿里小图标用以替代element-ui图标
08-10
vue项目element-ui自身插件库图标太少，样式单一。使用阿里图标库丰富自身element-ui的图标~~~~~~凑字数
vue element项目引入icon图标的方法
12-07
为了减少页面的加载速度,提高用户体验,对于一些图片决定使用图标代替,但是发现element-ui的图标少得可怜,完全满足不了我的要求,于是决定在element-ui的项目里引入第三方的图标库. 因为阿里巴巴海量的图标,所以决定...
Vue Element使用icon图标教程详解(第三方)
01-21
element-ui自带的图标库还是不够全，还是需要需要引入第三方icon，自己在用的时候一直有些问题，参考了些教程，详细地记录补充下 对于我们来说，首选的当然是阿里icon库 教程： 1.打开阿里icon，注册 >登录>图标管理...
Axure 实用组件库（包含elementui-antd-antv-echarts-icon.zip
03-18
axure 实用组件库，包含数千种图标，包含elementui组件库（支持1.*、2.*等多个版本版本），包含阿里antd（移动端、web端）组件库，包含antv、echarts图标组件库等
Element-Plus搭建CMS页面结构 引入第三方图标库iconfont（详细）
weixin_47906106的博客
07-13 1841
element plus组件库是由饿了么前端团队专门针对vue框架开发的组件库，专门用于电脑端网页的。因为里面集成了很多组件，所以使用他可以非常快速的帮我们实现网站的开发。因为图标需要在整个项目的任意地方使用，可以在public/index.html 中加载。注意：class=“iconfont” 是固定写法 后面跟那边复制的代码。如果elementui中的图标没有你想要的可以使用其它第三方的。引入的时候也是分成两种，一种是全部引入，一种是按需引入。在需要使用的地方引入。
在vue框架下element-ui两种引用阿里云图标库的方法
weixin_69556696的博客
04-24 1115
2.打开链接后复制代码，在刚才放src/accent文件夹下创建css文件放入复制的代码然后在main.js文件中声明。下载解压放入src的文件中， 要在main.js文件中声明引入压缩包中的iconfont.css文件。第一种方法是下载到本地或者自己的服务器稳一点，但是如果要更新要再次下载，重新引入。第二种方法是使用在线连接，更新只要在阿里云更新一下代码再次拉入css文件就可以。可以看到第一步是引入css文件，我们在main.js文件中已经引用。类名和一个特有的类名和自己的设置有关。
Vue 添加第三方图标(阿里矢量图)
Mr-k的博客
11-26 852
1.阿里矢量图官网，创建项目阿里矢量图 2.创建项目后，前缀这里在配置中需要用到，注意 3.选择需要下载的矢量图标，选择Font class，下载到本地 4.解压后获得以下文件 5.到Vue项目下，找个地方存放以上所有文件，直接复制粘贴即可 6.打开iconfont.css文件，对其进行一些配置，这里的icon就是你项目当时配的后前缀！！ [class^="icon"], [class*...
Element UI中的图标
taibaishenlong的专栏
11-09 2万+
1、vue是现今比较流行的前端框架了，目前，使用比较多的就是Element UI，为了页面的美观程度，我们每个前端页面大多都会使用一下图标，下面介绍一下图标的使用。如有需要，可参考官网: 2、举个简单的例子，我们编写一个input框，在框后端添加一个搜索的图标，代码如下所示： <el-form :inline="true"> <el-form-item label="城 市 :"> <el-input type="t
【Element-ui】Icon 图标与Button 按钮
最新发布
m0_62599305的博客
12-02 1万+
在前端开发中，界面的设计和交互是至关重要的一部分。一个直观、易用的界面往往离不开各种组件的运用。本文将聚焦于Element-ui中的两个常用组件——Icon图标和Button按钮，分别介绍它们的基本用法和一些实用技巧。Icon图标为界面添加了更多的元素，而Button按钮则是用户与页面进行交互的重要媒介，通过深入理解它们，我们可以更好地打造出美观、实用的前端界面。在本文中，我们深入了解了Element-ui中的Icon图标和Button按钮的基本用法和实用技巧。
Vue + Element UI 前端篇（十一）：第三方图标库
y19910825的博客
09-05 1373
用过Elment的同鞋都知道，Element UI提供的字体图符少之又少，实在是不够用啊，幸好现在有不少丰富的第三方图标库可用，引入也不会很麻烦。Font Awesome 5 跟之前的版本使用方式差别较大，功能是强大了，图标也更丰富了，但使用也变得更加复杂了。进入图标库选择自己喜欢的图标加入购物车，因为没有批量加入，一个个点简直要命，在控制台输入以下命令可以批量添加。本人还是比较喜欢之前的使用方式，安装容易，使用简单，毕竟我的需求也没那么复杂，只是简单的有图标可用就行了。
element ui图片上传-实现单图上传
qq_42852004的博客
05-06 1万+
业务需求，需要把多图上传的效果改造成为单图上传的效果 效果展示 原来官网效果 https://element.eleme.cn/2.0/#/zh-CN/component/upload 现在呈现的效果 第一步：改造element ui upload的组件，value的值接收上传回来的图片路径，当value不存在的时候会显示图片上传插件 第二步：当获得图片路径的时候，value有值得时候，显示该...
element ui 图标库
09-26
Element UI图标库的使用方法是在需要显示图标的地方，使用对应的图标名称作为属性值。例如，在input框的尾部添加搜索图标，可以使用suffix-icon属性，值为"el-icon-search"。在按钮中使用图标，可以使用icon属性，值...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值