DEV Community

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

Posted on

2

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

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more