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 相关文章推荐
基于Jquery的文字自动截取(提供源代码)
Aug 09 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
Oct 30 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
Nov 19 Javascript
JS与C#编码解码
Dec 03 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
May 04 Javascript
JavaScript实现身份证验证代码
Feb 17 Javascript
JS实现JSON.stringify的实例代码讲解
Feb 07 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
Sep 07 Javascript
动态加载权限管理模块中的Vue组件
Jan 16 Javascript
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
通过js给网页加上水印背景实例
Jun 17 Javascript
javascript事件监听与事件委托实例详解
Aug 16 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
使用JSON实现数据的跨域传输的php代码
2011/12/20 PHP
PHP处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
PHP智能识别收货地址信息实例
2019/01/05 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
2010/11/09 Javascript
js 利用image对象实现图片的预加载提高访问速度
2013/03/29 Javascript
jquery实现用户打分评分特效
2015/05/28 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
2017/05/02 Javascript
JavaScript注册时密码强度校验代码
2017/06/30 Javascript
Vue按需加载的具体实现
2017/12/02 Javascript
vue微信分享 vue实现当前页面分享其他页面
2017/12/02 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
vue 登录滑动验证实现代码
2018/08/24 Javascript
nodejs使用async模块同步执行的方法
2019/03/02 NodeJs
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
jQuery实现简易聊天框
2020/02/08 jQuery
vue商城中商品“筛选器”功能的实现代码
2020/07/01 Javascript
[03:02]生活中的Dendi之野外度假篇
2016/08/09 DOTA
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
python 从远程服务器下载日志文件的程序
2013/02/10 Python
Python获取Windows或Linux主机名称通用函数分享
2014/11/22 Python
Python中的tuple元组详细介绍
2015/02/02 Python
Python学生成绩管理系统简洁版
2020/04/05 Python
matlab中二维插值函数interp2的使用详解
2020/04/22 Python
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
Merchant 1948澳大利亚:新西兰领先的鞋类和靴子供应商
2018/03/24 全球购物
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
大学生就业自荐信
2013/10/26 职场文书
会计核算科岗位职责
2014/03/19 职场文书
医药公司采购员岗位职责
2014/09/12 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
《画家和牧童》教学反思
2016/02/17 职场文书
python编程项目中线上问题排查与解决
2021/11/01 Python