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

字体旋转器不旋转

font-awesome vue.js

BlowMan · 技术社区 · 6 年前

我已经完成了安装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 回复 | 直到 6 年前

Steve Hynding 6 年前

除非时代有所改变,否则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行来制作动画。相应调整,祝好运!

el.mano.el 5 年前

您可以添加 spin 指令。

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

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

Michal Skop 5 年前

这对我很有用:

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

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

推荐文章

Simon · 使用React更改字体可怕图标的颜色

2 年前

Muhammad Asif Mohtesham · 在Font Awesome中,是否可以使用CSS内容属性在“far”和“fas”数据前缀之间切换?[副本]

6 年前

en Peris · 使用JQuery动态更改AwesomeIcon的颜色

6 年前

Pranta Saha · 为什么Font Awesome图标类不同

6 年前

Mav · 如何将图标与固定高度标记的中心对齐[重复]

6 年前

LP13 · 在中心对齐定位标记内的内容

6 年前

Fjott · CSS-居中字体超级图标

6 年前

Sinan Samet · 字体很棒的图标不会显示在Angular 5中

6 年前

Tithos · 品牌FA5图标不工作

6 年前

SuperUberDuper · 字体awesome在加载之前显示方块

6 年前