Font awesome spinner not spinning

react font awesome spinner not spinning
font awesome spin speed
font awesome spinning cog
font awesome icons
font awesome cdn
install font awesome
free font awesome icons
spinning font

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

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!

Animating Icons, <div class="fa-3x"> <i class="fas fa-spinner fa-spin"></i> <i class="fas appears to be an issue with web fonts in general and not something we can directly fix. I have used spinner icon as below but some how it is not spinning. It is just stuck with load icon. Align( alignment: Alignment.centerRight, child: IconButton( icon: Icon( FontAwesomeIcons.spinner,

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)

Spinning Font Awesome Examples, <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.​min.css" rel="stylesheet">. 2. ​. 3. <i class="fa fa-spinner fa-spin"></i>. 4. I have replaced bootstraps glyphicon with font awesome's fa fa-cog fa-spin but the cog is spinning out of boundaries as if the center is not on the same line as the text.

You can add the spin directive.

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

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

Spinning Icons not working in Chrome · Issue #2490 · FortAwesome , I am most certainly still getting this issue. However, it seems like a Chrome issue rather than a Font-Awesome issue. I created this plunkr to  I am using font awesome spin icon through CSS background for loading the page.

Issue #671 · FortAwesome/Font-Awesome, Rendering issue: icon-spin fa-spin shake/wobble (chrome firefox) #671 If you are not satisfied and you need a pixel perfect spinner, please consider to use an​  On Internet Explorer 11, (not reproducible on Chrome or Firefox), the icon won&#39;t stop spinning even after the fa-spin class has been removed from the element. I have attached two Plunker links,

fa fa-spinner, ​x. <!DOCTYPE html> <html> <head> <title>Font Awesome Icons</title> <p>​Spinning:</p> <i class="fa fa-spinner fa-spin" style="font-size:24px"></i> ​  Spinner Icons. The table below shows all Font Awesome Spinner icons:

Super simple and cool FontAwesome spinner, Super simple and cool FontAwesome spinner trick (jQuery). By Haktan Suren i class = "fa fa-spin fa-cog" ></ i > Do not forget to comment! The following examples are kept simple and assume use of Font Awesome CDN, which provides auto-accessibility support.If you are not using the Font Awesome CDN, please see the manual accessibility examples and read more about making your icons more awesome for all users

Comments
  • could you provide the main.js and the component code?
  • Did you register it as a nuxt plugin? If the source for the spin icon module requires client-side integration, you'll also need to disable ssr in the plugin configuration
  • No I did not register as a next plugin, I did not see any reference to it in the docs. Kindly point to it or illustrate with code so I get the idea
  • My bad, not plugin related. How did you import faSpin? Is it part of pro icons? If so, you'll need to import it. Would you be able to provide a live example on glitch.com?
  • @Steve Glitch workspace created
  • Your answer is perfect. I modified my code accordingly, really appreciate your help.
  • Font Awesome 5 has the class fa-spin
  • thanks. i'm using reactjs, this works for me: <FontAwesomeIcon icon={faSpinner} className="fa-spin" />