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 简单验证代码(用户名,密码,邮箱)
Sep 28 Javascript
jquery 学习之二 属性(html()与html(val))
Nov 25 Javascript
js DOM的学习笔记
Dec 22 Javascript
js实现iframe自动自适应高度的方法
Feb 17 Javascript
jquery图片切换插件
Mar 16 Javascript
JS中mouseover和mouseout多次触发问题如何解决
Jun 06 Javascript
Javascript随机标签云代码实例
Jun 21 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 Javascript
javascript中new Array()和var arr=[]用法区别
Dec 01 Javascript
vue 虚拟dom的patch源码分析
Mar 01 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
Oct 27 Javascript
vue+elementUI实现表格列的显示与隐藏
Apr 13 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
PHP实现邮件群发的源码
2013/06/18 PHP
php读取文件内容的方法汇总
2015/01/24 PHP
JavaScript Sort 的一个错误用法示例
2015/03/20 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
jQuery时间轴插件使用详解
2015/07/16 Javascript
javascript日期处理函数,性能优化批处理
2015/09/06 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
完美解决js传递参数中加号和&号自动改变的方法
2016/10/11 Javascript
Python中用format函数格式化字符串的用法
2015/04/08 Python
python图像常规操作
2017/11/11 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
详解python3中zipfile模块用法
2018/06/18 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
pycharm激活码有效到2020年11月底
2020/09/18 Python
python绘制汉诺塔
2021/03/01 Python
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
HTML5 audio标签使用js进行播放控制实例
2015/04/24 HTML / CSS
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
欧舒丹澳洲版:L’OCCITANE
2017/07/17 全球购物
某个公司的Java笔面试题
2016/03/11 面试题
高中毕业生自我鉴定范文
2013/09/26 职场文书
行政人员岗位职责
2013/12/08 职场文书
生物学学生自我评价
2014/01/17 职场文书
运动会广播稿100字
2014/09/14 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
见习报告的格式
2014/11/04 职场文书
2014年财务工作总结与计划
2014/12/08 职场文书
转让协议书
2015/01/27 职场文书
优质护理服务心得体会
2016/01/22 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python
一篇带你入门Java垃圾回收器
2021/06/16 Java/Android
Python 避免字典和元组的多重嵌套问题
2022/07/15 Python
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript