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 innerHTML使用分析
Dec 03 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
Mar 19 Javascript
Javascript中Event属性搜集整理
Sep 17 Javascript
javascript中的this详解
Dec 08 Javascript
Javascript 实现图片无缝滚动
Dec 19 Javascript
在JavaScript的正则表达式中使用exec()方法
Jun 16 Javascript
vue事件修饰符和按键修饰符用法总结
Jul 25 Javascript
webpack构建的详细流程探底
Jan 08 Javascript
Node批量爬取头条视频并保存方法
Sep 20 Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 Javascript
vue中input的v-model清空操作
Sep 06 Javascript
vue+高德地图实现地图搜索及点击定位操作
Sep 09 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
PHP中Session的概念
2006/10/09 PHP
php微信支付之APP支付方法
2015/03/04 PHP
PHP基于socket实现的简单客户端和服务端通讯功能示例
2017/07/10 PHP
PHP微商城开源代码实例
2019/03/27 PHP
Yii框架连表查询操作示例
2019/09/06 PHP
accesskey 提交
2006/06/26 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
2013/11/07 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
JS获取鼠标相对位置的方法
2016/09/20 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
ES6 更易于继承的类语法的使用
2019/02/11 Javascript
javascript实现图片轮播代码
2019/07/09 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
jQuery 选择方法及$(this)用法实例分析
2020/05/19 jQuery
简单了解JavaScript arguement原理及作用
2020/05/28 Javascript
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
用Python制作简单的朴素基数估计器的教程
2015/04/01 Python
Python脚本实时处理log文件的方法
2016/11/21 Python
Python中selenium实现文件上传所有方法整理总结
2017/04/01 Python
浅谈python中列表、字符串、字典的常用操作
2017/09/19 Python
使用Python搭建虚拟环境的配置方法
2018/02/28 Python
python psutil库安装教程
2018/03/19 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
python多维数组切片方法
2018/04/13 Python
Python基于多线程操作数据库相关问题分析
2018/07/11 Python
Python http接口自动化测试框架实现方法示例
2018/12/06 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
python交换两个变量的值方法
2019/01/12 Python
Django框架 Pagination分页实现代码实例
2019/09/04 Python
matplotlib部件之矩形选区(RectangleSelector)的实现
2021/02/01 Python
数控专业毕业生求职信范文
2013/09/21 职场文书
校园十佳歌手策划书
2014/01/22 职场文书
银行工作检查书范文
2014/01/31 职场文书
大学生个人年度总结范文
2015/02/15 职场文书
2015年中个人总结范文
2015/03/10 职场文书
Html5同时支持多端sdk的小技巧
2021/11/17 HTML / CSS