Element-ui里面没有的图标，推荐使用Iconfont（阿里图标库）及详细用法

最新推荐文章于 2024-05-11 17:41:49 发布
最新推荐文章于 2024-05-11 17:41:49 发布
阅读量2.3k 收藏 11
点赞数 8
文章标签： css3 css vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oilpastell/article/details/106387250
版权

Element-ui中的图标有限，写项目的时候难免会遇到Element-ui中没有的图标，这里推荐使用Iconfont（阿里图标库），里面的图标样式超多~
链接: 阿里图标库-官网地址.

以下给出我认为比较简单的使用方法

1.点开图标库，搜索你想要的图标样式在这里插入图片描述
2.将你需要的图标添加到购物车，这里需要登录，可以使用github账号
在这里插入图片描述
3.这里添加到项目，这里项目名字可以随便写
在这里插入图片描述
4.将文件下载到本地，并解压然后复制到style文件下
在这里插入图片描述
在这里插入图片描述
5.在main.js下导入
在这里插入图片描述
6.打开iconfont.css文件，找到下载下来图标的类名
在这里插入图片描述
7.要在哪里使用图标，就在哪里添加类名
在这里插入图片描述

oilpastell
关注
  • 8
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
阿里小图标用以替代element-ui图标
08-10
使用阿里图标库，我们可以为Vue项目中的Element-UI组件添加更多样化、风格独特的图标，提升用户体验。 首先，你需要在阿里图标库官网（http://iconfont.cn/）注册账号并创建自己的项目。在项目中，你可以通过搜索...
如何在Vue+ElementUI项目中使用iconfont图标库
weixin_46073538的博客
10-24 5676
iconfont官网iconfont中有许多样式的图标可以给我们使用。什么是SVG格式？SVG是一种图形文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。
Element UI中的图标
热门推荐
taibaishenlong的专栏
11-09 2万+
1、vue是现今比较流行的前端框架了，目前，使用比较多的就是Element UI，为了页面的美观程度，我们每个前端页面大多都会使用一下图标，下面介绍一下图标的使用。如有需要，可参考官网: 2、举个简单的例子，我们编写一个input框，在框后端添加一个搜索的图标，代码如下所示： <el-form :inline="true"> <el-form-item label="城 市 :"> <el-input type="t
2024年Web前端最新ElementUI：项目中引入自己的ICON(4)，2024年最新面试官问的那些Web前端原理你都懂吗
最新发布
2401_84435838的博客
05-11 1047
除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
在vue框架下element-ui两种引用阿里云图标库的方法
weixin_69556696的博客
04-24 1256
2.打开链接后复制代码，在刚才放src/accent文件夹下创建css文件放入复制的代码然后在main.js文件中声明。下载解压放入src的文件中， 要在main.js文件中声明引入压缩包中的iconfont.css文件。第一种方法是下载到本地或者自己的服务器稳一点，但是如果要更新要再次下载，重新引入。第二种方法是使用在线连接，更新只要在阿里云更新一下代码再次拉入css文件就可以。可以看到第一步是引入css文件，我们在main.js文件中已经引用。类名和一个特有的类名和自己的设置有关。
定制化图标——Element UI 组件图标替换指南
Blog of Leviash
09-14 4220
本篇博客将介绍如何在使用 Element UI 组件时对原生图标进行定制化替换，提供了适用于满足个性化需求的方法和技巧。
Element UI中全部的图标以及组件
马志武的博客
02-20 1047
Element UI中全部的图标以及组件。
Element-Plus搭建CMS页面结构 引入第三方图标库iconfont（详细）
weixin_47906106的博客
07-13 2083
element plus组件库是由饿了么前端团队专门针对vue框架开发的组件库，专门用于电脑端网页的。因为里面集成了很多组件，所以使用他可以非常快速的帮我们实现网站的开发。因为图标需要在整个项目的任意地方使用，可以在public/index.html 中加载。注意：class=“iconfont” 是固定写法 后面跟那边复制的代码。如果elementui中的图标没有你想要的可以使用其它第三方的。引入的时候也是分成两种，一种是全部引入，一种是按需引入。在需要使用的地方引入。
element-ui.rar element-ui核心库压缩包
12-20
Element UI 是一个基于 Vue.js 的开源 UI 组件库，它为开发者提供了丰富的界面组件，...这个“element-ui.rar”压缩包就是你开始使用 Element UI 的起点，解压后可以查看其内部结构，进一步学习和了解每个组件的用法。
Vue中使用ElementUI使用第三方图标库iconfont的示例
10-17
主要介绍了Vue中使用ElementUI使用第三方图标库iconfont的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
element-demi:在Vue 2 3中使用Element UI的适配器
05-09
一个在Vue 2/3中使用Element UI的适配器。 :yo-yo: 只是个玩具 该库旨在测试postinstall npm挂钩。 安装完所有软件包之后。 该脚本将开始检查已安装的Vue版本，并根据本地Vue版本将导出重定向到。 :package: 安装 ...
jsp中使用vuejs+element-ui+vuejs第三方组件
02-17
本文将详细探讨如何在JSP环境中集成Vue.js和Element-UI，并利用Vue.js的第三方组件增强功能。 首先，我们需要了解JSP的基础知识。JSP是一种服务器端的动态网页技术，它可以嵌入Java代码，用于处理动态内容。而Vue....
vue框架、element-ui组件库、font awesome图表库
admin的博客
01-06 501
创建一个新vue项目。然后cd到该目录下，npm run serve启动服务器，即可打开。
vue开发一、在Vue中引入ElementUI二、在Vue中使用阿里图标库
小墨蛇的博客
11-22 2579
一、在Vue中引入ElementUI 1. 安装ElementUI 2. 引入ElementUI 3. 使用ElementUI组件 二、在Vue中使用阿里图标库 1. 在阿里图标库中选择图标 2. 下载图标 3. 引入图标 4. 使用图标 总结
springboot+elementUi实现评论功能，支持回复，点赞功能
客官不爱喝酒的博客
01-24 1万+
评论功能实现1.概述2.前端代码1.html2.css3.js4.api调用后台接口3.后端代码1.数据库SQL2.实体类3.daoMapper4.daoMapper实现5.service接口6.service接口实现7.controller 1.概述 做一个项目，突然需要实现回复功能，所依记录一下此次的一个实现思路，也希望给别人分享一下，估计代码还是不够完善，有空在实现分页功能。话不多说直接看效果图。主要实现了评论，回复，点赞，取消点赞，如果是自己评论的还可以删除，删除的规则是如果该评论下还有回复，也一并
element-ui 图标太少解决方案
路漫漫其修远兮
06-11 4084
目录背景解决方式操作流程批量导入图标 背景 element的图标太少了，需要扩展图标 解决方式 采用阿里云的图标库（地址：https://www.iconfont.cn/），下载下来扩充到项目中去 操作流程 参考：https://www.jianshu.com/p/a6b54662753b 批量导入图标 点击f12，选择consele，粘贴下面代码，回车 var icons = document.querySelectorAll('.icon-gouwuche1'); var auto_click = fu
element-ui及第三方图标库font-awesome的安装使用
W2398439780的博客
10-25 1830
npm install element-ui 安装。下载的组件都被放在了node_modules下面。终端 ctrl+c 输入Y ，回车终止项目。把要使用的控件的代码粘贴下来。可以看见自动添加了相关依赖。导入注册就能够使用了。
Element-ui和Element-plus获取所有icon
向梦想前进
07-30 1098
【代码】Element-ui和Element-plus获取所有icon。
Vue + Element UI 前端篇（十一）：第三方图标库
y19910825的博客
09-05 1566
用过Elment的同鞋都知道，Element UI提供的字体图符少之又少，实在是不够用啊，幸好现在有不少丰富的第三方图标库可用，引入也不会很麻烦。Font Awesome 5 跟之前的版本使用方式差别较大，功能是强大了，图标也更丰富了，但使用也变得更加复杂了。进入图标库选择自己喜欢的图标加入购物车，因为没有批量加入，一个个点简直要命，在控制台输入以下命令可以批量添加。本人还是比较喜欢之前的使用方式，安装容易，使用简单，毕竟我的需求也没那么复杂，只是简单的有图标可用就行了。
vue使用element-ui里图标的放大
04-02
要放大Element UI中的图标，您可以使用CSS的transform属性。您可以为图标添加一个鼠标悬停事件，然后在事件处理程序中设置transform属性的scaleX和scaleY值来放大图标。 以下是示例代码： ``` <template> <div> <el-icon name="el-icon-search" @mouseover="zoomIn" @mouseout="zoomOut"></el-icon> </div> </template> <script> export default { methods: { zoomIn(event) { event.target.style.transform = "scale(1.5)"; }, zoomOut(event) { event.target.style.transform = "scale(1)"; }, }, }; </script> <style scoped> .el-icon { transition: transform 0.3s ease-out; } </style> ``` 在上面的示例中，我们在el-icon上添加了mouseover和mouseout事件。当鼠标悬停在图标上时，zoomIn方法将被调用，并将transform属性设置为scale(1.5)，从而放大图标。当鼠标离开图标时，zoomOut方法将被调用，并将transform属性设置为scale(1)，从而将图标还原为原始大小。 我们还使用CSS的transition属性为图标添加了一个平滑的过渡效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值