字体很棒的微调器不旋转 [英] Font awesome spinner not spinning

问题描述

我已经通过这个梦幻般的链接在Nuxt中完成了fontawesome的安装；

I have completed an installation of fontawesome in Nuxt with this fantastic link;

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

我有一个显示为

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

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

The spinner does not spin, it is static.

我将fa-spin添加为

I added fa-spin as

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

这导致控制台Could not find one or more icon(s) undefined

任何人都可以向我指出正确的方向，向我展示如何使旋转器旋转.

Can anyone point me in the right direction, show me how to get my spinner spinning.

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

As suggested by @Steve, i have created a Glitch workspace https://glitch.com/edit/#!/join/d57a5054-b448-4a53-ad37-d9465b0cef8b

推荐答案

除非时代变了，否则Font Awesome不会提供现成的工具来为其字体和图形库制作动画.它们只是提供提供格式化为各种需求的单色矢量图形服务的服务:真型字体(TTF)，可缩放矢量图形(SVG)等.

Unless times have changed, Font Awesome does not provide out-of-the-box tools to animate their font and graphic libraries. They simply provide the service of offering single-colored, vector-graphic libraries formatted for various needs: true-type fonts (TTF), scalable vector graphics (SVG), etc.

您需要自己制作动画.幸运的是，使用CSS的时间非常短，而且您还可以控制微调器的旋转速度.

You'll need to do the animation work yourself. Fortunately, it's very short work with CSS plus you'll get to control the speed of your spinner spinning.

/* 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工作区(非常有用)以进行动画处理.相应地进行调整，祝您好运！

I've updated the Glitch workspace you created (very helpful) with the additional CSS lines above to animate. Adjust accordingly and good luck!

这篇关于字体很棒的微调器不旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！