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 相关文章推荐
基于jquery的checkbox下拉框插件代码
Jun 25 Javascript
Javascript脚本实现静态网页加密实例代码
Nov 05 Javascript
JS中类或对象的定义说明
Mar 10 Javascript
Javascript添加监听与删除监听用法详解
Dec 19 Javascript
js替换字符串中所有指定的字符(实现代码)
Aug 17 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
Nov 24 Javascript
微信小程序实现下拉刷新和轮播图效果
Nov 21 Javascript
手写Node静态资源服务器的实现方法
Mar 20 Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 Javascript
VUEX-action可以修改state吗
Nov 19 Javascript
Node.js API详解之 assert模块用法实例分析
May 26 Javascript
在HTML5 localStorage中存储对象的示例代码
Apr 21 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
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
javascript+dom树型菜单类,希望朋友们一起进步
2007/05/03 Javascript
JavaScript 学习笔记 Black.Caffeine 09.11.28
2009/11/30 Javascript
Node.js实战 建立简单的Web服务器
2012/03/08 Javascript
js简单的表格添加行和删除行操作示例
2014/03/31 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
jQuery事件用法实例汇总
2014/08/29 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
2015/05/28 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
完全深入学习Bootstrap表单
2016/11/28 Javascript
详解vue 中使用 AJAX获取数据的方法
2017/01/18 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
2019/11/05 Javascript
javascript json对象小技巧之键名作为变量用法分析
2019/11/11 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
Python 自动安装 Rising 杀毒软件
2009/04/24 Python
python通过socket查询whois的方法
2015/07/18 Python
Django使用Celery异步任务队列的使用
2018/03/13 Python
python 通过logging写入日志到文件和控制台的实例
2018/04/28 Python
python实现顺时针打印矩阵
2019/03/02 Python
matlab 计算灰度图像的一阶矩,二阶矩,三阶矩实例
2020/04/22 Python
Django 设置admin后台表和App(应用)为中文名的操作方法
2020/05/10 Python
详解pandas apply 并行处理的几种方法
2021/02/24 Python
亚洲颇具影响力的男性在线购物零售商:His
2019/11/24 全球购物
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
蔬菜基地的创业计划书
2014/01/06 职场文书
业务部主管岗位职责
2014/01/29 职场文书
迟到早退检讨书
2014/02/10 职场文书
一岗双责责任书
2014/04/15 职场文书
2014年党的群众路线教育实践活动整改措施(个人版)
2014/09/25 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书
简历自我评价:教师师德表现自我评价
2019/04/24 职场文书
Winsows11性能如何? win11性能测评多核竟比Win10差了10%
2021/11/21 数码科技
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL