He completado una instalación de fontawesome en Nuxt con este fantástico enlace;

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

Tengo una ruleta renderizada como

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

La ruleta no gira, es estática.

Agregué fa-spin como

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

Esto causó el error en la consola Could not find one or more icon(s) undefined

¿Alguien puede señalarme en la dirección correcta, mostrarme cómo hacer girar mi hilandero?

La porción relevante en 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'
    }

En el componente ( "../pages/index.vue" ) es;

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

Según lo sugerido por @Steve, he creado un espacio de trabajo de Glitch https://glitch.com/edit/#!/join / d57a5054-b448-4a53-ad37-d9465b0cef8b

8
BlowMan 7 sep. 2018 a las 18:02

3 respuestas

La mejor respuesta

A menos que los tiempos hayan cambiado, Font Awesome no proporciona herramientas listas para usar para animar sus bibliotecas de fuentes y gráficos. Simplemente brindan el servicio de ofrecer bibliotecas de gráficos vectoriales de un solo color formateadas para diversas necesidades: fuentes de tipo verdadero (TTF), gráficos vectoriales escalables (SVG), etc.

Tendrás que hacer el trabajo de animación tú mismo. Afortunadamente, es un trabajo muy corto con CSS plus, podrás controlar la velocidad de tu 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;
}

He actualizado el espacio de trabajo de Glitch que creó (muy útil) con las líneas CSS adicionales anteriores para animar. Ajuste en consecuencia y buena suerte!

7
Steve Hynding 17 sep. 2018 a las 05:07

Puede agregar la directiva spin.

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

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

9
Emanoel Trevisol 12 ago. 2019 a las 15:18

Esto funciona para mí:

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

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

3
Michal Skop 2 may. 2019 a las 00:49