Simplified: Implementing fontawesome (free version) into a React Project

mrpaulishaili

Paul C. Ishaili

Posted on February 21, 2022

Simplified: Implementing fontawesome (free version) into a React Project
  1. Copy and paste the code in your IDE teminal to run and install the necessary dependencies:
    npm i -S @fortawesome/fontawesome-svg-core @fortawesome/react-fontawesome @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons

  2. Create a fontawesome.js file in the React project src folder

  3. Add the following line of code to fontawesome.js file to import the whole fontwawesome brand library to project:
    import { library } from '@fortawesome/fontawesome-svg-core';
    import { fab } from '@fortawesome/free-brands-svg-icons';
    library.add(fab);

  4. Import fontawesome.js file into index.js in the parect directory of the React project.

  5. Go to file component where fontawesome icon is to be used, and add this line of code among the top level:
    import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

  6. Use Fontwasome icon in the project.
    <FontAwesomeIcon icon={['fab', 'facebook']} />

Do drop your thoughts and feedback for more collaborative updates on this and many more. ✌

💖 💪 🙅 🚩
mrpaulishaili
Paul C. Ishaili

Posted on February 21, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related