Question

我已经通过此链接完成了Nuxt中fontawesome的安装；

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

我的微调器呈现为

eth_call

微调器不旋转，它是静态的。

我将fa-spin添加为

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

这在控制台<font-awesome-icon :icon="['fas','spinner', 'spin']" />中引起了错误

任何人都可以向我指出正确的方向，告诉我如何使旋转器旋转。

Could not find one or more icon(s) undefined

上的相关部分

nuxt.config.js

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

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

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

Answer 1

除非时代改变了，否则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行更新了您创建的Glitch工作区（非常有用）以进行动画处理。相应地进行调整，祝您好运！

Answer 2

这对我有用：

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

Font Awesome v.5，Vue.js v.2（带有@ vue / cli 3）

Answer 3

您可以添加spin指令。

<font-awesome-icon icon="spinner" spin />

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

字体很棒的微调器不旋转

3 个答案: