Vue.js 字体旋转器不旋转

我已经用这个奇妙的链接在Nuxt中完成了fontawesome的安装

我将微调器渲染为

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

在组件（”./pages/index.vue“）中

根据@Steve的建议，我创建了一个故障工作区

---

除非时代已经改变，否则Font Awesome不会提供现成的工具来设置字体和图形库的动画。他们只是提供单色、矢量图形库的服务，这些库的格式满足各种需求：真字体（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;
}

我已经更新了您创建的小故障工作区（非常有用），上面有额外的CSS行来设置动画。相应调整，祝你好运

这对我很有用：

---

Font-awome v.5，Vue.js v.2（带@Vue/cli 3）

您可以添加

spin

指令

---

文档：

您能提供main.js和组件代码吗？您是否将其注册为nuxt插件？如果spin icon模块的源需要客户端集成，您还需要在插件配置中禁用ssr否我没有注册为下一个插件，我在文档中没有看到任何对它的引用。请指出它或用代码说明，这样我就得到了一个不好的想法，与插件无关。您是如何导入faSpin的？它是专业图标的一部分吗？如果是，则需要导入它。你能在glitch.com上提供一个实例吗？@Steve glitch workspace Createdy你的答案很完美。我相应地修改了我的代码，非常感谢你的帮助。Font Awesome 5拥有类

fa spin

由Emanoel Trevisol提供的答案是正确的。我不明白你为什么要用所有这些代码重新发明轮子，而只要

旋转就行了。谢谢。我使用的是reactjs，这对我很有用：

    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'
    }

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

/* 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;
}