vue element项目引入icon图标的方法


Posted in Javascript onJune 06, 2018

为了减少页面的加载速度,提高用户体验,对于一些图片决定使用图标代替,但是发现element-ui的图标少得可怜,完全满足不了我的要求,于是决定在element-ui的项目里引入第三方的图标库.

因为阿里巴巴海量的图标,所以决定引入阿里巴巴的图标库

阿里巴巴图标网站: http://www.iconfont.cn/

下面具体介绍如何使用

1.注册一个阿里巴巴账号,搜索自己需要的图标,添加到购物车,然后点击添加到项目,如果没有项目就需要创建.

vue element项目引入icon图标的方法 

2.点击添加到项目后,选中第二个

vue element项目引入icon图标的方法 

3.点击更多操作里面的编辑,注意前缀的设置,后面的命名不能和element里面的发生冲突

vue element项目引入icon图标的方法 

4.设置后保存代码到本地,然后解压到项目里,并对里面的iconfont.css文件进行修改

vue element项目引入icon图标的方法 

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;
}

vue element项目引入icon图标的方法 

6.添加之后在main.js引入图标

import "./assets/icon/iconfont.css";

vue element项目引入icon图标的方法

7.在你需要引入图标的地方直接使用即可.

vue element项目引入icon图标的方法

总结

以上所述是小编给大家介绍的vue element项目引入icon图标的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
Nov 09 Javascript
基于JQuery的一句话搞定手风琴菜单
Sep 14 Javascript
javascript加号"+"的二义性说明
Mar 04 Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 Javascript
javascript常用功能汇总
Jul 05 Javascript
使用原生js封装的ajax实例(兼容jsonp)
Oct 12 Javascript
Angular6笔记之封装http的示例代码
Jul 27 Javascript
JS使用数组实现的队列功能示例
Mar 04 Javascript
vue 表单之通过v-model绑定单选按钮radio
May 13 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
May 20 Javascript
axios异步提交表单数据的几种方法
Aug 11 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 Javascript
vue脚手架搭建过程图解
Jun 06 #Javascript
vue左右侧联动滚动的实现代码
Jun 06 #Javascript
Express本地测试HTTPS的示例代码
Jun 06 #Javascript
微信小程序仿美团城市选择
Jun 06 #Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 #jQuery
详解封装基础的angular4的request请求方法
Jun 05 #Javascript
React.js绑定this的5种方法(小结)
Jun 05 #Javascript
You might like
一贴学会PHP 新手入门教程
2009/08/03 PHP
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
JavaScript 变量作用域分析
2011/07/04 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
2012/10/11 Javascript
jquery数组之存放checkbox全选值示例代码
2013/12/20 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
jquery实现删除一个元素后面的所有元素功能
2015/12/21 Javascript
VUE axios发送跨域请求需要注意的问题
2017/07/06 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
2017/12/22 Javascript
JavaScript体验异步更好的解决办法
2018/01/08 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
vue过滤器用法实例分析
2019/03/15 Javascript
vue项目从node8.x升级到12.x后的问题解决
2019/10/25 Javascript
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
[50:59]2018DOTA2亚洲邀请赛 4.7 总决赛 LGD vs Mineski第四场
2018/04/10 DOTA
python实现得到一个给定类的虚函数
2014/09/28 Python
python中sys.argv参数用法实例分析
2015/05/20 Python
python结合API实现即时天气信息
2016/01/19 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
美国著名首饰网站:BaubleBar
2016/08/29 全球购物
儿科护士自我鉴定
2013/10/14 职场文书
法学毕业生自荐信
2013/11/13 职场文书
医学院学生的自我评价分享
2013/11/19 职场文书
国家励志奖学金获奖感言
2014/01/09 职场文书
高中生期末评语
2014/01/28 职场文书
药店主任岗位责任制
2014/02/10 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书
教你怎么用Python监控愉客行车程
2021/04/29 Python
Golang: 内建容器的用法
2021/05/05 Golang
使用Pytorch训练two-head网络的操作
2021/05/28 Python
拙作再改《我的收音机情缘》
2022/04/05 无线电