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 相关文章推荐
初窥JQuery(二)事件机制(2)
Dec 06 Javascript
教您去掉ie网页加载进度条的方法
Dec 09 Javascript
javascript面向对象编程代码
Dec 19 Javascript
导航跟随滚动条置顶移动示例代码
Sep 11 Javascript
jQuery 无刷新分页实例代码
Nov 12 Javascript
详解JS获取HTML DOM元素的8种方法
Jun 17 Javascript
Vue.extend构造器的详解
Jul 17 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
Jul 25 Javascript
前端Vue项目详解--初始化及导航栏
Jun 24 Javascript
深入理解javascript prototype的相关知识
Sep 19 Javascript
Vue.js的模板语法详解
Feb 16 Javascript
小程序实现列表倒计时功能
Jan 29 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图像处理类代码分享
2012/01/19 PHP
提高PHP编程效率的方法
2013/11/07 PHP
用php简单实现加减乘除计算器
2014/01/06 PHP
迅速确定php多维数组的深度的方法
2014/01/07 PHP
从wamp到xampp的升级之路
2015/04/08 PHP
javascript 框架小结 个人工作经验
2009/06/13 Javascript
jQuery学习笔记之jQuery选择器的使用
2010/12/22 Javascript
使用JavaScript获取电池状态的方法
2014/05/03 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
javascript中的后退和刷新实现方法
2016/11/10 Javascript
原生js实现吸顶效果
2017/03/13 Javascript
详解Vue组件之间的数据通信实例
2017/06/17 Javascript
jquery tmpl模板(实例讲解)
2017/09/02 jQuery
利用three.js画一个3D立体的正方体示例代码
2017/11/19 Javascript
使用vue如何构建一个自动建站项目
2018/02/05 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
Vue模板语法中数据绑定的实例代码
2019/05/17 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
2019/07/19 Javascript
解决vuecli3中img src 的引入问题
2020/08/04 Javascript
vue+iview分页组件的封装
2020/11/17 Vue.js
[31:00]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS iG
2014/05/25 DOTA
python的正则表达式re模块的常用方法
2013/03/09 Python
Python subprocess模块学习总结
2014/03/13 Python
Python命名空间详解
2014/08/18 Python
python静态方法实例
2015/01/14 Python
Python多线程编程(二):启动线程的两种方法
2015/04/05 Python
Python使用ftplib实现简易FTP客户端的方法
2015/06/03 Python
利用Python生成文件md5校验值函数的方法
2017/01/10 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
Python OpenCV中的resize()函数的使用
2019/06/20 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
Python 调用有道翻译接口实现翻译
2020/03/02 Python
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
安全标准化实施方案
2014/02/20 职场文书
雷锋之歌观后感
2015/06/10 职场文书
银行培训心得体会范文
2016/01/09 职场文书