Using FontAwesome inside a ReactJS component

Issue

I'm trying to use FontAwesome inside a ReactJS Functional Component. React component is using FontAwesome icons like <i class="fas fa-download"></i>:

import React, { useCallback, useState, useRef } from "react";

export default function Daw() {
  return (
    <>
        <div class="btn-group">
                <button type="button" title="Download" class="btn btn-download btn-outline-primary">
                    <i class="fas fa-download"></i>
                </button>
        </div>
    </>
  );
}

I have installed FontAwesome:

npm install --save @fortawesome/fontawesome-free

Import

When I import like this:

import '@fortawesome/fontawesome-free/css/all.min.css'
import '@fortawesome/fontawesome-free/css/v5-font-face.min.css'

I receive these errors:

media.css:1 GET http://127.0.0.1:8088/css/home/mediacms.io/mediacms/frontend/node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2 net::ERR_ABORTED 404 (Not Found)

media.css:1 GET http://127.0.0.1:8088/css/home/mediacms.io/mediacms/frontend/node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff2 net::ERR_ABORTED 404 (Not Found)

media.css:1 GET http://127.0.0.1:8088/css/home/mediacms.io/mediacms/frontend/node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.ttf net::ERR_ABORTED 404 (Not Found)

media.css:1 GET http://127.0.0.1:8088/css/home/mediacms.io/mediacms/frontend/node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.ttf net::ERR_ABORTED 404 (Not Found)

Tried

I studied this post:

https://fontawesome.com/docs/web/setup/host-yourself/webfonts

I cannot figure out why my import is not working. Why fonts are not found? They are installed alongside @fortawesome/fontawesome-free. So, what's wrong?

Solution

Eventually, the next/script package came to rescue. Implemented like this:

import React, { useCallback, useState, useRef } from "react";

import Script from "next/script"; // ** This one solved the problem :)

export default function Daw() {
  return (
    <>
        <Script
            src="https://kit.fontawesome.com/xx88888888.js"
            crossorigin="anonymous"
        />

        <div class="btn-group">
                <button type="button" title="Download" class="btn btn-download btn-outline-primary">
                    <i class="fas fa-download"></i>
                </button>
        </div>
    </>
  );
}

Answered By - user3405291