字体神器旋转图标无法旋转

Question

我已经使用这个神奇的链接在Nuxt中安装了fontawesome字体图标：

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

我有一个旋转图标被渲染为

<font-awesome-icon :icon="['fas','spinner']" />

旋转器没有旋转，它是静态的。

我添加了 "fa-spin"。

<font-awesome-icon :icon="['fas','spinner', 'spin']" />

这导致控制台出现错误 无法找到一个或多个未定义的图标

有人可以指引我正确的方向，告诉我如何让我的旋转器旋转。

nuxt.config.js 上的相关部分。

    modules: [
        'nuxt-fontawesome'
],


//font-awesome
  fontawesome: {
    imports: [
        {
          set: '@fortawesome/free-solid-svg-icons',
          icons: ['fas']
        },
    ],
  },

build: {
      config.resolve.alias['@fortawesome/fontawesome-free-brands$'] = '@fortawesome/fontawesome-free-brands/shakable.es.js'
      config.resolve.alias['@fortawesome/fontawesome-free-solid$'] = '@fortawesome/fontawesome-free-solid/shakable.es.js'
    }

在组件中（"../pages/index.vue"），它就是这样；

<template>
  <div>
    <font-awesome-icon :icon="['fas','spinner','spin' ]" />
  </div>
</template>

根据@Steve的建议，我创建了一个Glitch工作区https://glitch.com/edit/#!/join/d57a5054-b448-4a53-ad37-d9465b0cef8b

- BlowMan

---

你能提供 main.js 和组件代码吗？ - Boussadjra Brahim

你是否将它注册为 Nuxt 插件？如果旋转图标模块的源代码需要在客户端进行集成，你还需要在插件配置中禁用 SSR。 - Steve Hynding

没有，我并没有注册成为下一个插件，我在文档中也没有看到任何相关的参考。请指出它或用代码进行说明，以便我理解。 - BlowMan

我的错，与插件无关。你是如何导入faSpin的？它是专业图标的一部分吗？如果是这样，你需要导入它。你能在glitch.com上提供一个实时示例吗？ - Steve Hynding

@Steve Glitch 工作空间已创建 - BlowMan

Answer 1

你可以添加spin指令。 <font-awesome-icon icon="spinner" spin /> 文档：https://github.com/FortAwesome/vue-fontawesome#basic

- el.mano.el

Answer 2

这对我起作用：

<template>
  <div>
    <font-awesome-icon icon="spinner" class="fa-spin" />
  </div>
</template>

字体很棒 v.5，Vue.js v.2（带有@vue/cli 3）

- Michal Skop

---

谢谢。我正在使用ReactJS，这对我很有效：<FontAwesomeIcon icon={faSpinner} className="fa-spin" />。 - Nam Lê Quý

Answer 3

除非时间已经改变，Font Awesome没有提供直接对其字体和图形库进行动画处理的工具。他们只提供单色矢量图库，格式化为各种需求：TrueType 字体（TTF）、可缩放矢量图形（SVG）等等。

您需要自己完成动画工作。幸运的是，使用 CSS 很容易实现，而且您可以控制旋转速度。

/* Define an animation behavior */
@keyframes spinner {
  to { transform: rotate(360deg); }
}
/* This is the class name given by the Font Awesome component when icon contains 'spinner' */
.fa-spinner {
  /* Apply 'spinner' keyframes looping once every second (1s)  */
  animation: spinner 1s linear infinite;
}

我已经更新了您创建的Glitch工作区（非常有用），加入了以上额外的CSS代码来进行动画效果。请根据需要进行调整，祝你好运！

- Steve Hynding

---

你的回答非常完美。我已经相应地修改了我的代码，非常感谢你的帮助。 - BlowMan

Font Awesome 5有一个名为 fa-spin 的类。 - Michal Skop

Emanoel Trevisol的答案是正确的。我不知道为什么你要重新发明轮子，当只需要使用“spin”就可以完成工作。 - PrestonDocks

我不得不使用这个答案，因为旋转在跨平台上不兼容。在Windows上尝试将fa-spin类添加到此页面上的图标，你会发现它们不会旋转，但在Mac上会旋转：https://fontawesome.com/icons - undefined