代码之家 › 专栏 › 技术社区 › BlowMan

字体旋转器不旋转

font-awesome vue.js

5

BlowMan · 技术社区 · 7 年前

我已经完成了安装fontawesome在Nuxt与这个奇妙的链接;

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

我有一个旋转器渲染为

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

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

在组件中( )是的;

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

根据@Steve的建议,我创建了一个故障工作区 https://glitch.com/edit/#!/join/d57a5054-b448-4a53-ad37-d9465b0cef8b

1 回复 | 直到 7 年前

1

5

Steve Hynding 7 年前

除非时代有所改变,否则FontAwesome不会提供现成的工具来设置字体和图形库的动画。它们只是提供一种服务,即提供单色矢量图形库,这些库的格式满足各种需求:真字体(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;
}

我已经更新了你创建的小故障工作区(非常有用),上面有额外的CSS行来制作动画。相应调整,祝好运!

2

26

el.mano.el 6 年前

您可以添加 spin 指令。

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

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

3

7

Michal Skop 7 年前

这对我很有用:

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

第5版,虚拟用户.jsv、 2(带@vue/cli 3)