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 相关文章推荐
用cookies实现的可记忆的样式切换效果代码下载
Dec 24 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
Oct 18 Javascript
微信小程序 LOL 英雄介绍开发实例
Sep 30 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
Oct 30 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
Nov 13 Javascript
Angular企业级开发——MVC之控制器详解
Feb 20 Javascript
JS中的作用域链
Mar 01 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
Apr 13 Javascript
VUE脚手架的下载和配置步骤详解
Apr 01 Javascript
js 将线性数据转为树形的示例代码
May 28 Javascript
关于antd tree 和父子组件之间的传值问题(react 总结)
Jun 02 Javascript
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
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
thinkphp自定义权限管理之名称判断方法
2017/04/01 PHP
PHP基于接口技术实现简单的多态应用完整实例
2017/04/26 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
datePicker——日期选择控件(with jquery)
2007/02/20 Javascript
解读IE和firefox下JScript和HREF的执行顺序
2008/01/12 Javascript
js Date自定义函数 延迟脚本执行
2010/03/10 Javascript
jQuery 获取对象 定位子对象
2010/05/31 Javascript
js 程序执行与顺序实现详解
2013/05/13 Javascript
JavaScript在IE和FF下的兼容性问题
2014/05/19 Javascript
javascript中错误使用var造成undefined
2016/03/31 Javascript
字符串反转_JavaScript
2016/04/28 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
手动用webpack搭建第一个ReactApp的示例
2018/04/11 Javascript
JS伪继承prototype实现方法示例
2018/06/20 Javascript
django实现分页的方法
2015/05/26 Python
Python多线程扫描端口代码示例
2018/02/09 Python
Python实现替换文件中指定内容的方法
2018/03/19 Python
Python可变参数*args和**kwargs用法实例小结
2018/04/27 Python
详解python中的json和字典dict
2018/06/22 Python
一文了解Python并发编程的工程实现方法
2019/05/31 Python
Python使用百度翻译开发平台实现英文翻译为中文功能示例
2019/08/08 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
JD Sports瑞典:英国领先的运动时尚商店
2018/01/28 全球购物
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
什么是反射
2012/03/17 面试题
小学生竞选班干部演讲稿
2014/04/24 职场文书
初中同学会活动方案
2014/08/22 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
幼师中班个人总结
2015/02/12 职场文书
肖申克救赎观后感
2015/06/02 职场文书
读后感怎么写?书写读后感的基本技巧!
2019/12/10 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang