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中setInterval的用法总结
Nov 20 Javascript
js每隔5分钟执行一次ajax请求的实现方法
Nov 27 Javascript
jQuery+json实现的简易Ajax调用实例
Dec 14 Javascript
JS获取屏幕高度的简单实现代码
May 24 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
Jul 14 Javascript
使用Angular缓存父页面数据的方法
Jan 03 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 Javascript
BootStrap中的Fontawesome 图标
May 25 Javascript
webpack配置导致字体图标无法显示的解决方法
Mar 06 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
Apr 16 Javascript
node实现socket链接与GPRS进行通信的方法
May 20 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
Nov 12 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
Apache 配置详解(最好的APACHE配置教程)
2010/07/04 PHP
使用XDebug调试及单元测试覆盖率分析
2011/01/27 PHP
php的大小写敏感问题整理
2011/12/29 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
PHP编程实现的TCP服务端和客户端功能示例
2018/04/13 PHP
脚本之家贴图转换+转贴工具用到的js代码超级推荐
2007/04/05 Javascript
jquery判断checkbox(复选框)是否被选中的代码
2010/10/20 Javascript
JS中的public和private对象,即static修饰符
2012/01/18 Javascript
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
Javascript中的数据类型之旅
2015/10/18 Javascript
关于Bootstrap弹出框无法调用问题的解决办法
2016/03/10 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
AngularJs  Understanding Angular Templates
2016/09/02 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
JavaScript基础之流程控制语句的用法
2017/08/31 Javascript
jQuery控制input只能输入数字和两位小数的方法
2019/05/16 jQuery
javascript系统时间设置操作示例
2019/06/17 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
2020/04/15 Javascript
javascript实现打砖块小游戏(附完整源码)
2020/09/18 Javascript
[48:20]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Django自定义过滤器定义与用法示例
2018/03/22 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
Jupyter Notebook输出矢量图实例
2020/04/14 Python
优秀毕业生推荐信
2013/11/02 职场文书
车队司机自我鉴定
2014/03/02 职场文书
业务员的岗位职责
2014/03/15 职场文书
学习方法演讲稿
2014/05/10 职场文书
法院信息化建设方案
2014/05/21 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
社区端午节活动总结
2015/02/11 职场文书
高一英语教学反思
2016/03/03 职场文书
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL