vue element项目引入icon图标的方法
作者:bhq1711617151 发布时间:2024-05-09 10:51:19
标签:vue,element,icon
为了减少页面的加载速度,提高用户体验,对于一些图片决定使用图标代替,但是发现element-ui的图标少得可怜,完全满足不了我的要求,于是决定在element-ui的项目里引入第三方的图标库.
因为阿里巴巴海量的图标,所以决定引入阿里巴巴的图标库
阿里巴巴图标网站: http://www.iconfont.cn/
下面具体介绍如何使用
1.注册一个阿里巴巴账号,搜索自己需要的图标,添加到购物车,然后点击添加到项目,如果没有项目就需要创建.
2.点击添加到项目后,选中第二个
3.点击更多操作里面的编辑,注意前缀的设置,后面的命名不能和element里面的发生冲突
4.设置后保存代码到本地,然后解压到项目里,并对里面的iconfont.css文件进行修改
5.在iconfont.css进行修改,在文件里添加如下代码
[class^="el-icon-ump"], [class*=" el-icon-ump"] {
font-family:"fontFamily" !important;
/* 以下内容参照第三方图标库本身的规则 */
font-size: 18px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
6.添加之后在main.js引入图标
import "./assets/icon/iconfont.css";
7.在你需要引入图标的地方直接使用即可.
总结
以上所述是小编给大家介绍的vue element项目引入icon图标的方法网站的支持!
来源:https://blog.csdn.net/bhq1711617151/article/details/80580884


猜你喜欢
- 重现的前提条件: 输出格式为“文本”的并发程序:有效责任和用户。 如何在查看输出时出现Excel选项:系统管理员》安装》浏览器选项》添加一行
- <'% '************************************************
- ini文件是windows中经常使用的配置文件,主要的格式为:[Section1]option1 : value1option2 : val
- 如果查询结果很多,服务器解释你的ASP script将花费大量的时间,因为有许多的Response.Write语句要处理. 如果你将输出的全
- 本文以一个完整实例的形式实现了视频文件上传的功能。虽然是比较基础的应用,仍有一定的参考价值。分享给大家供大家参考之用。具体方法如下:首先,对
- 如何在SQL中启用全文检索功能?本文将通过实例向你剖折这个问题。这是一个全文索引的一个例子,首先在查询分析器中使用:use pubsgo--
- 一、base64模块base64模块提供了在二进制数据和可打印ASCII字符间编解码的功能,包括 RFC3548中定义的Base16, Ba
- 使用tkFileDialog实现文件选择、保存和路径选择概述看了下Tkinter的文档,对于Pop-up dialog有三类,现在用到的是t
- 大家都是用的哪一款远程控制工具呢?向日葵确实还可以,支持多平台、跨网络,但是必须要注册 Oray账号才行。虽然与免费版,但是用过的都知道,还
- 创建Spring Boot应用在基于Spring来重构JSP应用之前,我们先引入Spring Boot,使之成为一个Spring Boot应
- 一). ubuntu下mysql安装布局:/usr/bin  
- python的新式类是2.2版本引进来的,我们可以将之前的类叫做经典类或者旧式类。为什么要在2.2中引进new style class呢?官
- JSON格式数据简介JSON 全称“JavaScript Object Notation”,译为&a
- 在前面的章节中,我们讨论了Series的计算方法与Pandas的自动对齐功能。不光是Series,DataFrame也是支持运算的,而且还是
- 代码如下:--获取当前时间 Select getdate() --获取当前年月日 YY代表年,MM代表月,DD代表日,hh代表时
- 实现效果在网站页面上,点击某个超链接,页面跳转到某个位置,跳转过程有一个动画滚动效果,这是一种比较酷的体验。这种效果是如何实现的呢,本文通过
- write()方法把字符串str写入文件。没有返回值。由于缓冲,字符串可能不实际显示文件,直到flush()或close()方法
- 使用Python进行插值非常方便,可以直接使用scipy中的interpolateimport numpy as npx1 = np.lin
- 网上看到一个python写的数独,很好玩,分享给大家。import randomimport itertoolsfrom copy impo
- XA事务支持限于InnoDB存储引擎。MySQL XA实施是针对外部XA的,其中,MySQL服务器作为资源管理器,而客户端程序作为事务管理器