EN
React - use Font Awesome icons (script attached in head element)
3
points
In this article, we would like to show you how to use Font Awesome icons in React.
Quick solution
- paste the following line, inside
public/index.htmlfile, in<head>element:<script src="https://kit.fontawesome.com/86f68f5323.js" crossorigin="anonymous"></script> - find icon that you want to use: https://fontawesome.com/search (e.g. you can type
TYPO3), - click to the result matched to your preferences,
- copy icon code and paste into your JSX code, e.g.:
or:<i className="fab fa-typo3" /><FontAwesomeIcon icon="fa-brands fa-typo3" />
Practical example
In this example, we present step by step how to use Font Awesome icons in your React project.
1. Project structure
2. Import Font Awesome
Inside index.html file, in <head> element, paste the following line:
<script src="https://kit.fontawesome.com/86f68f5323.js" crossorigin="anonymous"></script>
Example index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/86f68f5323.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- ... -->
</body>
</html>
3. Use icon as element
Example App.js file:
const App = () => {
return (
<div>
Example icon: <i className='fab fa-typo3' />
<div/>
);
};
export default App;
4. Final result
