代码之家 › 专栏 › 技术社区 › Edward Tanguay

FontAwesome旋转器不会旋转

font-awesome reactjs

Edward Tanguay · 技术社区 · 4 年前

我用创建了一个React应用程序 npx create-react-app .

https://fontawesome.com/how-to-use/on-the-web/using-with/react

我安装了字体Awesome Dependencies:

npm i @fortawesome/fontawesome-svg-core
npm i @fortawesome/free-solid-svg-icons
npm i @fortawesome/react-fontawesome

然后我换了 App.js 为此:

import logo from './logo.svg';
import './App.css';
import { FaSpinner } from 'react-icons/fa';

function App() {
  return (
    <div className="App">
          <FaSpinner icon="spinner" spin /> This is a test.
    </div>
  );
}

export default App;

但它只显示不旋转的微调器图标:

如何让旋转器旋转?

注:

反应之外 ,Font Awesome无需做任何额外的工作来设置图标的动画,例如,这个简单的HTML代码显示了一个动画图标:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet"
          type="text/css"
          href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <title>testspin</title>
</head>
<body>
    <i class="fa fa-spinner fa-spin"
       aria-hidden="true"></i> 
This is a test
</body>
</html>

要使React版本轻松工作,我需要做些什么?

1 回复 | 直到 4 年前

Edward Tanguay 4 年前

默认情况下,微调器不会旋转。但是一个简单的方法可以在创建一个新的React应用程序后触发它像React的logo一样旋转。
添加类名在图标上添加一个小css来触发它旋转,如下所示:

import react from 'react';
import './App.css';
import { FaSpinner } from 'react-icons/fa';

function App() {
  return (
    <div className="App">
          <FaSpinner icon="spinner" className="spinner" /> This is a test.
    </div>
  );
}

export default App;

应用程序.css

.spinner {
    animation: spin infinite 5s linear;

    /*You can increase or decrease the timer (5s) to 
     increase or decrease the speed of the spinner*/
  }

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

推荐文章

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

3 年前

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

7 年前

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

7 年前

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

7 年前

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

7 年前

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

7 年前

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

7 年前

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

7 年前

Tithos · 品牌FA5图标不工作

7 年前

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

7 年前