Font awesome spinner not spinning

user_1597934 0
Viewed 12329

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

font-awesome vue.js
3 Answers
user_64607720

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)

user_16666230

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!

user_12150210
Related