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 arguments 传递给函数的隐含参数
Aug 21 Javascript
Eclipse去除js(JavaScript)验证错误
Feb 11 Javascript
javascript获取form里的表单元素的示例代码
Feb 14 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
Mar 19 Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
Jan 21 Javascript
如何使用AngularJs打造权限管理系统【简易型】
May 09 Javascript
Bootstrap企业网站实战项目4
Oct 14 Javascript
详解vue渲染从后台获取的json数据
Jul 06 Javascript
bootstrap switch开关组件使用方法详解
Aug 22 Javascript
vue组件name的作用小结
May 23 Javascript
Javascript实现动态时钟效果
Nov 17 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企业级应用之常见缓存技术篇
2011/01/27 PHP
php daddslashes()和 saddslashes()有哪些区别分析
2012/10/26 PHP
PHP类与对象中的private访问控制的疑问
2012/11/01 PHP
PHP统计目录大小的自定义函数分享
2014/11/18 PHP
php+ajax实现无刷新分页
2015/11/18 PHP
Adnroid 微信内置浏览器清除缓存
2016/07/11 PHP
Ajax请求PHP后台接口返回信息的实例代码
2018/08/21 PHP
JavaScript中Cookie操作实例
2015/01/09 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
第十篇BootStrap轮播插件使用详解
2016/06/21 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
2017/01/04 Javascript
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
Vue实现数据请求拦截
2019/10/23 Javascript
js实现提交前对列表数据的增删改查
2020/01/16 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
nodejs+koa2 实现模仿springMVC框架
2020/10/21 NodeJs
Angular处理未可知异常错误的方法详解
2021/01/17 Javascript
深入理解python中的浅拷贝和深拷贝
2016/05/30 Python
python运行时间的几种方法
2016/06/17 Python
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
Python部署web开发程序的几种方法
2017/05/05 Python
python调用java的jar包方法
2018/12/15 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
使用python实现CGI环境搭建过程解析
2020/04/28 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
Python中SQLite如何使用
2020/05/27 Python
用python实现一个简单计算器(完整DEMO)
2020/10/14 Python
Urban Outfitters美国官网:美国生活方式品牌
2016/08/26 全球购物
香港唯港荟酒店预订:Hotel ICON
2018/03/27 全球购物
波兰家居和花园家具专家:4Home
2019/05/26 全球购物
美国厨房和园艺工具网上商店:Nestneed
2019/08/24 全球购物
税务专业毕业生自荐信
2013/11/10 职场文书
高中军训感言600字
2014/03/11 职场文书
2015中秋节慰问信范文
2015/03/23 职场文书
学校开除通知书
2015/04/25 职场文书