vue项目引入Iconfont图标库的教程图解


Posted in Javascript onOctober 24, 2018

在进行项目开发过程中,vue项目中前端所使用的UI框架是element ui,但是element的字体图标库不足以满足日常开发的需要,或者公司项目要求使用本公司ui设计的图标,都可以参考以下的步骤,

1. 在阿里图标库中选中你想要的图标库,并点击进去,

vue项目引入Iconfont图标库的教程图解

2. 注意: 我们在选择图标是后,如果是需要多个图标就将选中的图标加入购物车,但是如果我们没有在这一个图标库中找到自己需要的图标时,可以去其他的图标库中进行选择,但是要记住离开这个图标库的时候,记得将选择的图标加入自己创建的项目中,

不然去其他图标库的时候,图标库中会被清空,除非你从新进入这一个图标库中,

vue项目引入Iconfont图标库的教程图解

3. 选择完成后,点击右上角选择购物车,

vue项目引入Iconfont图标库的教程图解

4. 进入购物车页面,然后点击提交至项目中,因为我们是新建的项目,所以要先在图标库中新建项目后,才能将以选中图标加入项目中,进行保存,

vue项目引入Iconfont图标库的教程图解

5.  点击添加后,进入我的项目这个页面,会显示自己已经选择的图标,在点击下载到本地前,要注意配置一下图表选项,

vue项目引入Iconfont图标库的教程图解

6. 点击编辑选项;

vue项目引入Iconfont图标库的教程图解

7. 配置图标使用前缀,然后点击保存,就可以下载到本地了,

vue项目引入Iconfont图标库的教程图解

8. 点击下载到本地,并将下载的文件放入所开发的项目中去,

vue项目引入Iconfont图标库的教程图解

9.  将下载好的文件放入项目中去,首先在src下的assets项目新建一个文件夹,名字自己定义,注意要明了,建下载的文件放进去就好的,然后就可以修改iconfont.css文件,修改完,才能进行显示,

[class^="el-icon-third"], [class*=" el-icon-third"]/*这里有空格*/
{ font-family:"iconfont" !important;
 font-size:16px;
 font-style:normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

上面是要替换的css内容,

vue项目引入Iconfont图标库的教程图解

10.  在main.js引入iconfont.css文件,也就是刚刚我们修改的文件,这样就不用每一个组件想用图标的时候都要引一遍了,

vue项目引入Iconfont图标库的教程图解

11.  在组件中使用新下载的图标,

vue项目引入Iconfont图标库的教程图解

总结

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

Javascript 相关文章推荐
JavaScript Event学习第三章 早期的事件处理程序
Feb 07 Javascript
基于mootools插件实现遮罩层新手引导
May 24 Javascript
在javascript中执行任意html代码的方法示例解读
Dec 25 Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
Dec 03 Javascript
jquery实现的树形目录实例
Jun 26 Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
ES6新特性一: let和const命令详解
Apr 20 Javascript
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
详解如何使用koa实现socket.io官网的例子
Nov 04 Javascript
微信 jssdk 签名错误invalid signature的解决方法
Jan 14 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
Sep 02 Javascript
vue中的router-view组件的使用教程
Oct 23 #Javascript
jQuery pagination分页示例详解
Oct 23 #jQuery
jquery.pagination.js分页使用教程
Oct 23 #jQuery
vue项目使用微信公众号支付总结及遇到的坑
Oct 23 #Javascript
jquery分页插件pagination使用教程
Oct 23 #jQuery
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
Oct 23 #Javascript
解决JavaScript中0.1+0.2不等于0.3问题
Oct 23 #Javascript
You might like
一步一步学习PHP(5) 类和对象
2010/02/16 PHP
php IP转换整形(ip2long)的详解
2013/06/06 PHP
浅谈PHP定义命令空间的几个注意点(推荐)
2016/10/29 PHP
javascript URL编码和解码使用说明
2010/04/12 Javascript
JSQL  一个 web DB 的封装
2010/05/05 Javascript
location.href 在IE6中不跳转的解决方法与推荐使用代码
2010/07/08 Javascript
动态创建script标签实现跨域资源访问的方法介绍
2014/02/28 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
2016/04/29 Javascript
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
JavaScript字符串检索字符的方法
2017/06/23 Javascript
JS中定位 position 的使用实例代码
2017/08/06 Javascript
清空元素html("") innerHTML="" 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
微信小程序slider组件使用详解
2018/01/31 Javascript
python实现迭代法求方程组的根过程解析
2019/11/25 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
jQuery实现全选按钮
2021/01/01 jQuery
如何搜索查找并解决Django相关的问题
2014/06/30 Python
Python中利用sqrt()方法进行平方根计算的教程
2015/05/15 Python
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
Python如何快速上手? 快速掌握一门新语言的方法
2017/11/14 Python
Django中反向生成models.py的实例讲解
2018/05/30 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
如何利用python生成MD5并去重
2020/12/07 Python
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
卖车协议书
2014/04/21 职场文书
2015年五四青年节活动总结
2015/02/10 职场文书
交通事故案件代理词
2015/05/23 职场文书
数学备课组工作总结
2015/08/12 职场文书
先进工作者主要事迹材料
2015/11/03 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
聊一聊python常用的编程模块
2021/05/14 Python
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL
使用pipenv管理python虚拟环境的全过程
2021/09/25 Python
sql server 累计求和实现代码
2022/02/28 SQL Server