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 相关文章推荐
sina的lightbox效果。
Jan 09 Javascript
理解Javascript_10_对象模型
Oct 16 Javascript
IE6 hack for js 集锦
Sep 23 Javascript
深入分析JSONP跨域的原理
Dec 10 Javascript
浅谈Javascript中Object与Function对象
Sep 26 Javascript
详解JavaScript的变量和数据类型
Nov 27 Javascript
基于javascript简单实现对身份证校验
Jan 25 Javascript
Angular.js如何从PHP读取后台数据
Mar 24 Javascript
js实现5秒倒计时重新发送短信功能
Feb 05 Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 Javascript
基于Vue和Element-Ui搭建项目的方法
Sep 06 Javascript
Vue+Element-UI实现上传图片并压缩
Nov 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
php.ini中文版
2006/10/09 PHP
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
PHP执行linux命令6个函数代码实例
2020/11/24 PHP
基于PHP实现生成随机水印图片
2020/12/09 PHP
javascript 动态加载 css 方法总结
2009/07/11 Javascript
Javascript 作用域使用说明
2009/08/13 Javascript
js中根据字数截取字符串,不能截断url
2012/01/12 Javascript
Javascript中valueOf与toString区别浅析
2013/03/19 Javascript
什么是 AngularJS?AngularJS简介
2014/12/06 Javascript
jQuery中outerWidth()方法用法实例
2015/01/19 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
javascript汉字拼音互转的简单实例
2016/10/09 Javascript
jQuery实现根据生日计算年龄 星座 生肖
2016/11/23 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
2016/12/14 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
three.js中文文档学习之创建场景
2017/11/20 Javascript
深入理解vue中的slot与slot-scope
2019/04/22 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
vue实现井字棋游戏
2020/09/29 Javascript
JS实现京东商品分类侧边栏
2020/12/11 Javascript
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
Python下使用Scrapy爬取网页内容的实例
2018/05/21 Python
python怎么删除缓存文件
2020/07/19 Python
python 用pandas实现数据透视表功能
2020/12/21 Python
Dyson加拿大官方网站:购买戴森吸尘器,风扇,冷热器及配件
2016/10/26 全球购物
加拿大鞋网:Globo Shoes
2019/12/26 全球购物
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
UML设计模式笔试题
2014/06/07 面试题
初中生学习生活的自我评价
2013/11/20 职场文书
公司合作意向书
2014/04/01 职场文书
社区创先争优承诺书
2014/08/30 职场文书
python图像处理基本操作总结(PIL库、Matplotlib及Numpy)
2021/06/08 Python
SQL Server表分区删除详情
2021/10/16 SQL Server