解决vue 项目引入字体图标报错、不显示等问题

 更新时间:2018年09月01日 15:18:08   作者:mxf_bear  
今天小编就为大家分享一篇解决vue 项目引入字体图标报错、不显示等问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

问题:在项目开发时使用字体图标,发现两个问题;

1、出现报错:

解决方法为:把字体引入方式改为绝对路径

2、不报错,但是不显示图标字体,出现方框

原因可能有两种:

①没在用到的地方引入字体的样式文件②你使用的是后缀名为 .styl 文件

①的解决办法是在用到的地方引入字体的样式文件(全局引入的话需要从app.vue里引入)

②这个就是我遇到的问题,浪费了我好几分钟!!!微笑

解决办法是把font.styl改为font.css

记得在用到图标的地方引入

问题原理后续再写。

以上这篇解决vue 项目引入字体图标报错、不显示等问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue-ls vue本地储存的实例讲解

    vue-ls vue本地储存的实例讲解

    这篇文章主要介绍了vue-ls vue本地储存的实例讲解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue动画效果实现方法示例

    vue动画效果实现方法示例

    这篇文章主要介绍了vue动画效果实现方法,结合完整实例形式分析了vue.js+animate.css实现的动画切换效果相关操作技巧,需要的朋友可以参考下
    2019-03-03
  • 浅谈super-vuex使用体验

    浅谈super-vuex使用体验

    super-vuex是一套用于简化Vuex的数据架构。这篇文章主要介绍了浅谈super-vuex使用体验,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • Nuxt.js SSR与权限验证的实现

    Nuxt.js SSR与权限验证的实现

    这篇文章主要介绍了Nuxt.js SSR与权限验证的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • vue使用WEB自带TTS实现语音文字互转的操作方法

    vue使用WEB自带TTS实现语音文字互转的操作方法

    这篇文章主要介绍了vue使用WEB自带TTS实现语音文字互转,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • Vue.js每天必学之构造器与生命周期

    Vue.js每天必学之构造器与生命周期

    Vue.js每天必学之构造器与生命周期,告诉大家什么是Vue.js构造器与生命周期,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • vue如何在data中引入图片的正确路径

    vue如何在data中引入图片的正确路径

    这篇文章主要介绍了vue如何在data中引入图片的正确路径,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • vue parseHTML 函数源码解析AST基本形成

    vue parseHTML 函数源码解析AST基本形成

    这篇文章主要为大家介绍了vue parseHTML 函数源码解析AST基本形成,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • 解决vue-cli-service不是内部或外部命令也不是可运行的程序或批处理文件的报错问题

    解决vue-cli-service不是内部或外部命令也不是可运行的程序或批处理文件的报错问题

    这篇文章主要介绍了解决vue-cli-service不是内部或外部命令也不是可运行的程序或批处理文件的报错问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-03-03
  • preload对比prefetch的功能区别详解

    preload对比prefetch的功能区别详解

    这篇文章主要为大家介绍了preload对比prefetch的使用区别详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06

最新评论