FontAwesome旋转器不会在反应中旋转
FontAwesome旋转器不会在反应中旋转
提问于 2020-10-24 00:20:20
我用npx create-react-app创建了一个React应用程序。
然后按照这些指示
https://fontawesome.com/how-to-use/on-the-web/using-with/react
我安装了字体令人惊讶的依赖关系：
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;但它只显示不旋转的旋转图标：
我怎么才能让旋转器旋转呢？
注意：
在React之外的之外，字体很好地工作，无需做任何额外的工作来动画图标，例如这个简单的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>我需要做什么才能让轻松地工作？
回答 4
Stack Overflow用户
回答已采纳
发布于 2020-10-24 00:38:41
默认情况下，旋转器不会旋转。但是一个简单的方法触发它旋转，就像在创建一个新的React之后的react标志。
在图标中添加一个旋转的className，并添加一个小的css来触发它的旋转，如下所示：
App.js
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;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);
}
}Stack Overflow用户
发布于 2021-05-03 08:58:40
实际上，您只需要添加类fa-spin，不需要添加任何自定义css，这已经包含在React Fontawesome fa-spin中。下面是我的一个项目的一个例子：
import React, { useState } from 'react'
import { faCog, faFilePdf } from '@fortawesome/free-solid-svg-icons'
import { Button } from 'react-bootstrap'
const MyComponent = () => {
const [pdfCreatingState,setPdfCreatingState] = useState(false);
const handleClick = ev => {
setPdfCreatingState(true);
setTimeout(() => generatePDFDocument(docData,docName));
}
const generatePDFDocument = async (docData,docName) => {
...
}
return(
<Button className="mr-4" onClick={handleClick}>
<FontAwesomeIcon icon={pdfCreatingState ? faCog : faFilePdf} title={"Generate PDF report"} className={pdfCreatingState ? "fa-spin" : ""} />
</Button>
);
}Stack Overflow用户
发布于 2021-07-19 01:58:50
对于Nextjs，我也遇到了同样的情况，并注意到没有为动画生成合适的<style>标记。所以我通过直接进口解决了这个问题。在我的例子中，添加import "@fortawesome/fontawesome-svg-core/styles.css"修复了问题，FontAwesome按预期工作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64508793
复制相关文章
相似问题
腾讯云开发者
