Vue项目中如何引入icon图标


Posted in Javascript onMarch 28, 2018

1.下载icon图标,推荐icomoon网站,里面有大量的矢量图标,也可以自定义,当然你也可以去阿里巴巴矢量图标库下载你所需要的小图标。点击进入icomoon网站点击右上角“IcoMoon App”,找到自己需要的图标后选择然后点击右下角“Generate Font”,接着可以在左上角第二个按钮“Preferences”进行自定义你要下载的图标信息,一般我都是进去改一下“Font Name”,然后返回点击右下角“Download”,这样你就下载了图标。

2.解压下载的图标压缩包,得到这样的文件:

Vue项目中如何引入icon图标

3.在vue项目里src文件夹中新建common文件夹,将这里的fonts复制到common中,再在common文件夹中新建一个stylus文件夹,将这里的style.css复制到stylus中,这个css文件放的是图标的相关样式代码,我放进去后改成icon.styl便于识别(PS:我是用stylus预处理器,所以新建stylus,并且后缀名为styl,不同预处理器可以不同,这个见仁见智,只是尽量遵循代码规范而已),放入后的文件夹结构如下:

Vue项目中如何引入icon图标

4.那么现在就是重点了,刚解压的文件中style.css中@font-face的url路径是需要修改成项目中的路径的,修改如下:

Vue项目中如何引入icon图标

5.然后要在App.vue里引入这个文件,不然是不生效的:

Vue项目中如何引入icon图标

6.然后在template上写对应的class名,加上样式即可:

Vue项目中如何引入icon图标Vue项目中如何引入icon图标

得到的页面如下所示:

Vue项目中如何引入icon图标

总结

以上所述是小编给大家介绍的Vue项目中如何引入icon图标,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS 分号引起的一段调试问题
Jun 18 Javascript
JavaScript 变量作用域分析
Jul 04 Javascript
jqgrid 编辑添加功能详细解析
Nov 08 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
Dec 14 Javascript
jQuery之Deferred对象详解
Sep 04 Javascript
javascript原始值和对象引用实例分析
Apr 25 Javascript
JS基于面向对象实现的拖拽功能示例
Dec 20 Javascript
jQuery实现页面顶部下拉广告
Dec 30 Javascript
node.js 用socket实现聊天的示例代码
Oct 17 Javascript
vue.js+element-ui动态配置菜单的实例
Sep 07 Javascript
koa+jwt实现token验证与刷新功能
May 30 Javascript
js实现列表向上无限滚动
Jan 13 Javascript
JavaScript中的E-mail 地址格式验证
Mar 28 #Javascript
javascript性能优化之分时函数的介绍
Mar 28 #Javascript
Vue数据监听方法watch的使用
Mar 28 #Javascript
Vue 自定义动态组件实例详解
Mar 28 #Javascript
详解VUE 对element-ui中的ElTableColumn扩展
Mar 28 #Javascript
微信小程序之分享页面如何返回首页的示例
Mar 28 #Javascript
js中el表达式的使用和非空判断方法
Mar 28 #Javascript
You might like
ThinkPHP实现多数据库连接的解决方法
2014/07/01 PHP
php防止站外远程提交表单的方法
2014/10/20 PHP
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
用javascript获取地址栏参数
2006/12/22 Javascript
Prototype使用指南之range.js
2007/01/10 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
使用 jQuery.ajax 上传带文件的表单遇到的问题
2016/10/31 Javascript
Javascript 实现放大镜效果实例详解
2016/12/03 Javascript
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
详解VUE 数组更新
2017/12/16 Javascript
js变量声明var使用与不使用的区别详解
2019/01/21 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
JavaScript实现简单贪吃蛇效果
2020/03/09 Javascript
详解Python编程中包的概念与管理
2015/10/16 Python
python web框架学习笔记
2016/05/03 Python
Python用模块pytz来转换时区
2016/08/19 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
Flask框架学习笔记之模板操作实例详解
2019/08/15 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
Pymysql实现往表中插入数据过程解析
2020/06/02 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
Linux如何为某个操作添加别名
2013/03/01 面试题
大三在校生电子商务求职信
2013/10/29 职场文书
如何写一份好的自荐信
2014/01/02 职场文书
机电一体化专业毕业生自荐信
2014/06/19 职场文书
乡镇保密工作责任书
2014/07/28 职场文书
党旗在我心中演讲稿
2014/09/15 职场文书
医德医风个人工作总结2014
2014/11/14 职场文书
二年级学生期末评语
2014/12/26 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
Python中的套接字编程是什么?
2021/06/21 Python
Redis缓存-序列化对象存储乱码问题的解决
2021/06/21 Redis
MySQL 那些常见的错误设计规范,你都知道吗
2021/07/16 MySQL