Font awesome spinner not spinning

问题

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

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

I have a spinner rendered as

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

The spinner does not spin, it is static.

I added fa-spin as

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

This caused the error in the console 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.

The relevant portion on the 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'
    }

In the component("../pages/index.vue") it is;

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

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

回答1:

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.

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

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

回答2:

You can add the spin directive.

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

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

回答3:

This works for me:

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

Font Awesome v.5, Vue.js v.2 (with @vue/cli 3)

来源：https://stackoverflow.com/questions/52225228/font-awesome-spinner-not-spinning

标签

Vue.js

font-awesome