'Using FontAwesome inside a ReactJS component

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)

Screenshot: errors

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?

javascriptcssreactjsfont-awesome


Solution 1:[1]

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>
    </>
  );
}

Solution 2:[2]

It may need many CSS and JS libs.

Install the packages:

npm install --save @fortawesome/fontawesome-svg-core
npm install --save @fortawesome/free-solid-svg-icons
npm install --save @fortawesome/react-fontawesome

And import like this:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

I hope this will help you.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 user3405291
Solution 2 user3405291

Related Questions