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 相关文章推荐
用js实现随机返回数组的一个元素
Aug 13 Javascript
javascript中的关于类型转换的性能优化
Dec 14 Javascript
jquery索引在使用中的一些困惑
Oct 24 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
Dec 05 Javascript
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 Javascript
HTML页面定时跳转方法解析(2种任选)
Dec 22 Javascript
jQuery按需加载轮播图(web前端性能优化)
Feb 17 Javascript
JavaScript生成随机验证码代码实例
Sep 28 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 Javascript
Vuejs通过拖动改变元素宽度实现自适应
Sep 02 Javascript
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
小程序实现筛子抽奖
May 26 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
使用Apache的rewrite技术
2006/06/22 PHP
正则表达式语法
2006/10/09 Javascript
php从数组中随机抽取一些元素的代码
2012/11/05 PHP
php post大量数据时发现数据丢失问题解决方法
2015/06/20 PHP
PHP微信开发之文本自动回复
2016/06/23 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
laravel清除视图缓存的代码
2019/10/23 PHP
js 颜色选择器(兼容firefox)
2009/03/05 Javascript
图片上传即时显示缩略图的js代码
2009/05/27 Javascript
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
JS设置下拉列表框当前所选值的方法
2015/12/22 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
2016/10/09 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
Electron + vue 打包桌面操作流程详解
2019/06/24 Javascript
解决layui的table插件无法多层级获取json数据的问题
2019/09/19 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
解决vue init webpack 下载依赖卡住不动的问题
2020/11/09 Javascript
Python冒泡排序注意要点实例详解
2016/09/09 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
Python文件操作方法详解
2020/02/09 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
python使用re模块爬取豆瓣Top250电影
2020/10/20 Python
俄罗斯达美乐比萨外送服务:Domino’s Pizza
2020/12/18 全球购物
北大青鸟学生求职信
2013/09/24 职场文书
计算机应用专业学生的自我评价分享
2013/11/03 职场文书
市政施工员自我鉴定
2014/01/15 职场文书
信息服务专业毕业生求职信
2014/03/02 职场文书
小学二年级学生评语
2014/04/21 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
内乡县衙导游词
2015/02/05 职场文书
军训通讯稿范文
2015/07/18 职场文书
Python中json.load()和json.loads()有哪些区别
2021/06/07 Python