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 相关文章推荐
myeclipse安装jQuery插件的方法
Mar 29 Javascript
javascript管中窥豹 形参与实参浅析
Dec 17 Javascript
jQuery实现 注册时选择阅读条款 左右移动
Apr 11 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
Dec 14 Javascript
js实现九宫格拼图小游戏
Feb 13 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
Mar 25 Javascript
bootstrap table单元格新增行并编辑
May 19 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
React如何避免重渲染
Apr 10 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
Jul 08 Javascript
vue-simple-uploader上传成功之后的response获取代码
Sep 07 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
SONY ICF-F10中波修复记
2021/03/02 无线电
PHP 如何向 MySQL 发送数据
2006/10/09 PHP
PHP INT类型在内存中占字节详解
2019/07/20 PHP
用js实现的一个Flash滚动轮换显示图片代码生成器
2007/03/14 Javascript
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
jQuery多项选项卡的实现思路附样式及代码
2014/06/03 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
javascript 定时器工作原理分析
2016/12/03 Javascript
jQuery validata插件实现方法
2017/06/25 jQuery
使用jQuery 操作table 完成单元格合并的实例
2017/12/27 jQuery
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
微信小程序实现页面浮动导航
2020/01/08 Javascript
Python装饰器用法实例总结
2018/05/26 Python
python3基于OpenCV实现证件照背景替换
2018/07/18 Python
centos6.8安装python3.7无法import _ssl的解决方法
2018/09/17 Python
Python操作json的方法实例分析
2018/12/06 Python
Django 表单模型选择框如何使用分组
2019/05/16 Python
Python dict和defaultdict使用实例解析
2020/03/12 Python
Python抓包并解析json爬虫的完整实例代码
2020/11/03 Python
html5 button autofocus 属性介绍及应用
2013/01/04 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
2019/09/23 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
英国钻石公司:British Diamond Company
2020/02/16 全球购物
项目经理岗位职责
2013/11/11 职场文书
心理健康教育心得体会
2013/12/29 职场文书
群众路线批评与自我批评发言稿
2014/10/16 职场文书
2015年教师自我评价范文
2015/03/04 职场文书
博物馆观后感
2015/06/05 职场文书
道士塔读书笔记
2015/06/30 职场文书
追悼会家属答谢词
2015/09/29 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书
Vue.Draggable实现交换位置
2022/04/07 Vue.js
最新动漫情报:2022年7月新番定档超过30部, OVERLORD骨王第四季也在其中噢
2022/05/04 日漫