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

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

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

1、出现报错:

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

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

原因可能有两种:

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

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

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

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

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

问题原理后续再写。

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

相关文章

  • 公共Hooks封装useTableData表格数据实例

    公共Hooks封装useTableData表格数据实例

    这篇文章主要为大家介绍了公共Hooks封装useTableData表格数据实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • vue+element DatePicker实现日期选择器封装

    vue+element DatePicker实现日期选择器封装

    Vue Element DatePicker是一款基于Vue.js的日期选择控件,它提供了丰富的日期选择功能,支持日期范围选择、日期格式化、自定义日期格式、快捷选择等功能,极大地提高了用户的体验,是开发者必备的日期选择控件。
    2023-02-02
  • Element-ui的table中使用fixed后出现行混乱情况的解决

    Element-ui的table中使用fixed后出现行混乱情况的解决

    这篇文章主要介绍了Element-ui的table中使用fixed后出现行混乱情况的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 详解vue-cli3多页应用改造

    详解vue-cli3多页应用改造

    这篇文章主要介绍了详解vue-cli3多页应用改造,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-06-06
  • Vue keep-alive的实现原理分析

    Vue keep-alive的实现原理分析

    这篇文章主要介绍了Vue keep-alive的实现原理分析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue指令的学习

    Vue指令的学习

    这篇文章主要介绍了Vue指令,Vue官网一共有提供了14个指令,下面我们就来详细讲解每一个指令的详细内容,需要的朋友可以参考一下
    2021-10-10
  • Vue.js每天必学之构造器与生命周期

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

    Vue.js每天必学之构造器与生命周期,告诉大家什么是Vue.js构造器与生命周期,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • Vue组件的计算属性和普通属性的区别说明

    Vue组件的计算属性和普通属性的区别说明

    这篇文章主要介绍了Vue组件的计算属性和普通属性的区别说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • Vite中自制mock服务器(不使用第三方服务)

    Vite中自制mock服务器(不使用第三方服务)

    本文主要介绍了Vite中自制mock服务器,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • vue 微信分享回调iOS和安卓回调出现错误的解决

    vue 微信分享回调iOS和安卓回调出现错误的解决

    这篇文章主要介绍了vue 微信分享回调iOS和安卓回调出现错误的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09

最新评论