【问题标题】:How to fix an icon that is not showing (FontAwesome)如何修复未显示的图标(FontAwesome)
【发布时间】:2019-06-09 16:01:27
【问题描述】:

我想显示的图标没有出现。

我安装了 FontAwesome,如本页所示:https://fontawesome.com/how-to-use/on-the-web/using-with/vuejs

我也重新安装了。

<font-awesome-icon 
    icon="spinner" 
    class="fas fa-spinner fa-spin fa-3x fa-fw">
</font-awesome-icon>

<span class="sr-only">Loading...</span>

显示以下错误信息:

找不到一个或多个图标 {prefix: "fas", iconName: "spinner"}

不显示图标。

【问题讨论】:

  • 首先检查您是否导入了“fontawesome-free-solid”并在库中使用

标签: vue.js vuejs2 icons font-awesome


【解决方案1】:

您很可能没有将图标从@fortawesome/fontawesome-svg-core 包中添加到library 以供组件使用。

import Vue from "vue";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { library } from "@fortawesome/fontawesome-svg-core";
import { faSpinner } from "@fortawesome/free-solid-svg-icons";

Vue.component("font-awesome-icon", FontAwesomeIcon);

library.add(faSpinner);

一旦你这样做了,就不需要再指定类了。因此,如果您需要一个与spins3x 一样大且具有fixed-width 的微调器图标,则应改为执行以下操作。

<font-awesome-icon 
  icon="spinner" 
  size="3x" 
  spin fixed-width>
</font-awesome-icon>

参考

https://github.com/FortAwesome/vue-fontawesome#basic

【讨论】:

  • 是的,这有帮助。我在 main.js 中包含了所需的图标并且它起作用了。谢谢!!
  • 很高兴它有帮助:)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-12-06
  • 1970-01-01
  • 2022-11-29
  • 2014-11-22
  • 2016-03-16
  • 1970-01-01
相关资源
最近更新 更多