DEV Community

Cover image for Simplified: Implementing fontawesome (free version) into a React Project
Paul C. Ishaili
Paul C. Ishaili

Posted on

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. ✌

Top comments (0)