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 相关文章推荐
用htc组件制作windows选项卡
Jan 13 Javascript
复制本贴标题和地址的js代码
Jul 01 Javascript
JavaScript 在各个浏览器中执行的耐性
Apr 06 Javascript
jquery 简单导航实现代码
Sep 11 Javascript
使用javascript做的一个随机点名程序
Feb 13 Javascript
减少访问DOM的次数提升javascript性能
Feb 24 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
Apr 02 Javascript
学好js,这些js函数概念一定要知道【推荐】
Jan 19 Javascript
分享一个精简的vue.js 图片lazyload插件实例
Mar 13 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
Feb 02 Javascript
vue-router源码之history类的浅析
May 21 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和ACCESS写聊天室(四)
2006/10/09 PHP
基于PHP选项与信息函数的使用详解
2013/05/10 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
PHP实现无限级分类(不使用递归)
2015/10/22 PHP
PHP中抽象类、接口的区别与选择分析
2016/03/29 PHP
深入剖析PHP中printf()函数格式化使用
2016/05/23 PHP
模拟select的代码
2011/10/19 Javascript
jquery实现的美女拼图游戏实例
2015/05/04 Javascript
AngularJS 单元测试(一)详解
2016/09/21 Javascript
浅谈Vue的加载顺序探讨
2017/10/25 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
angularjs 获取默认选中的单选按钮的value方法
2018/02/28 Javascript
vue自定义指令directive的使用方法
2019/04/07 Javascript
微信小程序实现卡片层叠滑动效果
2019/06/21 Javascript
JavaScript实现省市区三级联动
2020/02/13 Javascript
一篇文章读懂Python赋值与拷贝
2018/04/19 Python
对Django 转发和重定向的实例详解
2019/08/06 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
Python利用FFT进行简单滤波的实现
2020/02/26 Python
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
美国网上眼镜供应商:LEOTONY(眼镜、RX太阳镜和太阳镜)
2017/10/31 全球购物
美国购买新书和二手书网站:Better World Books
2018/10/31 全球购物
Pandora西班牙官方商店:PandoraShop.es
2020/10/05 全球购物
HashMap和Hashtable的区别
2013/05/18 面试题
abstract是什么意思
2012/02/12 面试题
某公司面试题
2012/03/05 面试题
基层工作经历证明
2014/01/13 职场文书
2014年小学体育工作总结
2014/12/11 职场文书
优秀学生干部事迹材料
2014/12/24 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
烈士陵园观后感
2015/06/08 职场文书
python四种出行路线规划的实现
2021/06/23 Python
Java常用函数式接口总结
2021/06/29 Java/Android
nginx中proxy_pass各种用法详解
2021/11/07 Servers