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修改css样式style
Apr 15 Javascript
DOM_window对象属性之--clipboardData对象操作代码
Feb 03 Javascript
javascript学习(二)javascript常见问题总结
Jan 02 Javascript
BootStrap中的table实现数据填充与分页应用小结
May 26 Javascript
AngularJS全局scope与Isolate scope通信用法示例
Nov 22 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 Javascript
浅谈react.js中实现tab吸顶效果的问题
Sep 06 Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
Nov 29 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
Jul 24 Javascript
vue实现购物车小案例
Sep 27 Javascript
JavaScript实现猜数字游戏
May 20 Javascript
JS实现简易图片自动轮播
Oct 16 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
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
用js实现的仿sohu博客更换页面风格(简单版)
2007/03/22 Javascript
Javascript 继承机制的实现
2009/08/12 Javascript
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
2016/03/01 Javascript
js阻止冒泡和默认事件(默认行为)详解
2016/10/20 Javascript
Javascript使用function创建类的两种方法(推荐)
2016/11/19 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
2017/06/22 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
微信小程序实现获取小程序码和二维码java接口开发
2019/03/29 Javascript
vue自定义switch开关组件,实现样式可自行更改
2019/11/01 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
2020/07/28 Javascript
手把手教你如何编译打包video.js
2020/12/09 Javascript
[08:54]《一刀刀一天》之DOTA全时刻18:十九支奔赴西雅图队伍全部出炉
2014/06/04 DOTA
[01:07:15]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第二场 1月25日
2021/03/11 DOTA
使用C语言扩展Python程序的简单入门指引
2015/04/14 Python
详解Python的collections模块中的deque双端队列结构
2016/07/07 Python
python3.x 将byte转成字符串的方法
2018/07/17 Python
python 基于PYMYSQL使用MYSQL数据库
2020/12/24 Python
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
外贸业务员工作职责
2014/01/06 职场文书
将相和教学反思
2014/02/04 职场文书
2014厂务公开实施方案
2014/02/17 职场文书
安全保证书范文
2014/04/29 职场文书
法英专业大学生职业生涯规划范文:衡外情,量己力!
2014/09/23 职场文书
大班下学期幼儿评语
2014/12/30 职场文书
华清池导游词
2015/02/02 职场文书
大学生读书笔记大全
2015/07/01 职场文书
公司酒会主持词
2015/07/02 职场文书
python中的getter与setter你了解吗
2022/03/24 Python
Python时间操作之pytz模块使用详解
2022/06/14 Python