vue element项目引入icon图标的方法
作者:bhq1711617151 时间:2024-05-09 10:51:19
为了减少页面的加载速度,提高用户体验,对于一些图片决定使用图标代替,但是发现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
标签:vue,element,icon
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Python中用format函数格式化字符串的用法
2022-04-17 03:02:06
python绘制直方图的方法
2021-08-20 14:59:32
![](https://img.aspxhome.com/file/2023/6/131456_0s.jpg)
SQLServer 数据导入导出的几种方法小结
2024-01-25 02:13:05
![](https://img.aspxhome.com/file/2023/1/108521_0s.jpg)
Python计算程序运行时间的方法
2023-08-09 09:53:50
微信小程序实现列表下拉刷新上拉加载
2024-05-21 10:11:26
![](https://img.aspxhome.com/file/2023/8/126158_0s.gif)
Typescript3.9 常用新特性一览(推荐)
2024-04-18 10:56:16
Python中POST调用Restful接口示例
2021-03-14 19:42:19
php之php.ini配置文件讲解案例
2023-06-11 18:19:06
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2023-09-03 06:56:01
![](https://img.aspxhome.com/file/2023/6/56186_0s.png)
Python3实现的反转单链表算法示例
2021-09-22 01:33:30
Python中字典和JSON互转操作实例
2023-03-12 14:18:11
python使用cv2库、下载opencv库的方法
2022-09-05 00:45:09
![](https://img.aspxhome.com/file/2023/9/117309_0s.png)
python使用ProjectQ生成量子算法指令集
2023-03-17 20:26:51
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2023-06-15 09:26:28
![](https://img.aspxhome.com/file/2023/3/76003_0s.png)
Django+boostrap 美化admin后台的操作
2022-02-26 16:16:21
![](https://img.aspxhome.com/file/2023/3/71503_0s.jpg)
Python中的sort()方法使用基础教程
2022-03-07 21:44:09
JavaScript刷新页面的几种方法总结
2024-04-22 12:53:01
SQL Server简单模式下误删除堆表记录恢复方法(绕过页眉校验)
2024-01-15 00:18:11
![](https://img.aspxhome.com/file/2023/8/129308_0s.png)
python发布模块的步骤分享
2023-08-07 11:29:25
![](https://img.aspxhome.com/file/2023/0/61230_0s.jpg)
Pytest测试报告工具Allure的高级用法
2023-06-20 17:21:09
![](https://img.aspxhome.com/file/2023/3/134923_0s.png)