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:xxxxxxxxxx1<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:
xxxxxxxxxx1<i className="fab fa-typo3" />xxxxxxxxxx1<FontAwesomeIcon icon="fa-brands fa-typo3" />
In this example, we present step by step how to use Font Awesome icons in your React project.
Inside index.html file, in <head> element, paste the following line:
xxxxxxxxxx1
<script src="https://kit.fontawesome.com/86f68f5323.js" crossorigin="anonymous"></script>Example index.html file:
xxxxxxxxxx1
2
<html lang="en">3
<head>4
<script src="https://kit.fontawesome.com/86f68f5323.js" crossorigin="anonymous"></script>5
</head>6
<body>7
<!-- ... -->8
</body>9
</html>Example App.js file:
xxxxxxxxxx1
const App = () => {2
return (3
<div>4
Example icon: <i className='fab fa-typo3' />5
<div/>6
);7
};8
9
export default App;
