Vue项目中如何引入icon图标

 更新时间:2018年03月28日 17:11:56   转载 作者:紫裳  
这篇文章主要介绍了Vue如何引入icon图标,本文通过图文并茂的形式给大家介绍的非常详细,需要的朋友可以参考下

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

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

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

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

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

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

得到的页面如下所示:

总结

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

相关文章

  • Vue项目页面跳转时浏览器窗口上方显示进度条功能

    Vue项目页面跳转时浏览器窗口上方显示进度条功能

    这篇文章主要介绍了Vue项目页面跳转时浏览器窗口上方显示进度条功能,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • vue-router源码之history类的浅析

    vue-router源码之history类的浅析

    这篇文章主要介绍了vue-router源码之history类的浅析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • 详解vue-validator(vue验证器)

    详解vue-validator(vue验证器)

    本篇文章主要介绍了vue-validator(vue验证器),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • vue调试工具vue-devtools安装及使用方法

    vue调试工具vue-devtools安装及使用方法

    本文主要介绍 vue的调试工具 vue-devtools 的安装和使用,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-11-11
  • Vue.js数据绑定之data属性

    Vue.js数据绑定之data属性

    这篇文章主要为大家详细介绍了Vue.js数据绑定之data属性,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 详解vue或uni-app的跨域问题解决方案

    详解vue或uni-app的跨域问题解决方案

    这篇文章主要介绍了详解vue或uni-app的跨域问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • Vue的轮播图组件实现方法

    Vue的轮播图组件实现方法

    下面小编就为大家分享一篇Vue的轮播图组件实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 使用vuex的state状态对象的5种方式

    使用vuex的state状态对象的5种方式

    本文给大家介绍了使用vuex的state状态对象的5种方式,给大家贴出了我的vuex的结构,感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-04-04
  • Vue自定义指令结合阿里云OSS优化图片的实现方法

    Vue自定义指令结合阿里云OSS优化图片的实现方法

    这篇文章主要介绍了Vue自定义指令结合阿里云OSS优化图片的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • VueJS 取得 URL 参数值的方法

    VueJS 取得 URL 参数值的方法

    form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。本文给大家简单介绍了VueJS U取得RL 参数值的方法,详细给大家介绍了vue自定义表单生成器可根据json参数动态生成表单效果,感兴趣的朋友一起看看吧
    2019-07-07

最新评论