Шрифт крутой спиннер не крутится - PullRequest
Новая
       12

Шрифт крутой спиннер не крутится

0 голосов
/ 07 сентября 2018

Я завершил установку fontawesome в Nuxt по этой фантастической ссылке;

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

У меня есть спиннер, отображаемый как 

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

Спиннер не вращается, он статичен.

Я добавил fa-spin как 

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

Это вызвало ошибку в консоли Could not find one or more icon(s) undefined

Может ли кто-нибудь направить меня в правильном направлении, показать мне, как заставить мой спиннер вращаться.

Соответствующая часть на 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

Ответы [ 3 ]

0 голосов
/ 02 мая 2019

Это работает для меня: 

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

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

0 голосов
/ 12 августа 2019

Вы можете добавить директиву spin.

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

Документы: https://github.com/FortAwesome/vue-fontawesome#basic

0 голосов
/ 17 сентября 2018

Если время не изменилось, Font Awesome не предоставляет готовых инструментов для анимации своих шрифтов и графических библиотек. Они просто предоставляют услугу предоставления одноцветных библиотек векторной графики, отформатированных для различных нужд: шрифты истинного типа (TTF), масштабируемая векторная графика (SVG) и т. Д.

Вам нужно будет сделать анимацию самостоятельно. К счастью, это очень короткая работа с CSS, и вы сможете контролировать скорость вращения вашего прядильщика. 

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

Я обновил созданную вами рабочую область Glitch (очень полезно) с помощью дополнительных строк CSS для анимации. Отрегулируйте соответственно и удачи!

...