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 相关文章推荐
javascript function调用时的参数检测常用办法
Feb 26 Javascript
javascript + jquery实现定时修改文章标题
Mar 19 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
Oct 20 Javascript
angularjs表格ng-table使用备忘录
Mar 09 Javascript
ES6中Array.copyWithin()函数的用法实例详解
Sep 16 Javascript
Angular 向组件传递模板的两种方法
Feb 23 Javascript
JS同步、异步、延迟加载的方法
May 05 Javascript
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
ES6使用export和import实现模块化的方法
Sep 10 Javascript
WebPack工具运行原理及入门教程
Dec 02 Javascript
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
比较node.js和Deno
Apr 27 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
Prototype PeriodicalExecuter对象 学习
2009/07/19 Javascript
通过DOM脚本去设置样式信息
2010/09/19 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
2013/04/26 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
window.open打开页面居中显示的示例代码
2013/12/27 Javascript
多种方法实现load加载完成后把图片一次性显示出来
2014/02/19 Javascript
JavaScript中跨域调用Flash的方法
2014/08/11 Javascript
Javascript获取当前日期的农历日期代码
2014/10/08 Javascript
JavaScript的原型继承详解
2015/02/15 Javascript
JavaScript模拟实现继承的方法
2015/03/30 Javascript
jQuery实现宽屏图片轮播实例教程
2015/11/24 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
2016/06/12 Javascript
JS之相等操作符详解
2016/09/13 Javascript
基于jQuery的select下拉框选择触发事件实例分析
2016/11/18 Javascript
Vue组件选项props实例详解
2017/08/18 Javascript
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
一文快速详解前端框架 Vue 最强大的功能
2019/05/21 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
解决vue scoped html样式无效的问题
2020/10/24 Javascript
[22:20]初生之犊-TI4第5名LGD战队纪录片
2014/08/13 DOTA
Python学习小技巧之列表项的排序
2017/05/20 Python
利用python获取Ping结果示例代码
2017/07/06 Python
基于python神经卷积网络的人脸识别
2018/05/24 Python
python使用matplotlib画饼状图
2018/09/25 Python
flask框架自定义过滤器示例【markdown文件读取和展示功能】
2019/11/08 Python
Python中 Global和Nonlocal的用法详解
2020/01/20 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
Sneaker Studio捷克:购买运动鞋
2018/07/08 全球购物
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
医院搬迁方案
2014/06/14 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
老舍《猫》教学反思
2016/02/17 职场文书