Languages
[Edit]
EN

React - use Font Awesome icons (script attached in head element)

3 points
Created by:
Eshaal-Wilkinson
774

In this article, we would like to show you how to use Font Awesome icons in React.

Quick solution

  1. paste the following line, inside public/index.html file, in <head> element:
    <script src="https://kit.fontawesome.com/86f68f5323.js" crossorigin="anonymous"></script>
  2. find icon that you want to use: https://fontawesome.com/search (e.g. you can type TYPO3),
  3. click to the result matched to your preferences,
  4. copy icon code and paste into your JSX code, e.g.:
    <i className="fab fa-typo3" />
    or:
    <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

Visual Studio Code - exaple project structure
Visual Studio Code - exaple 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

React - use font awesome icons
React - use font awesome icons

References

  1. Font Awesome
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join