Not able to use Font Awsome in ReactJs project

Question

I have installed Font Awesome but I'm still not able to use it with Boostrap in my ReactJs project.

I took this steps to install it:

npm install --save font-awesome

And then I imported it in my index.js file like:

import 'font-awesome/css/font-awesome.min.css';

Webpack.config.js looks like this:

module: {
        rules: [
            {
                test: /\.js?/,
                include: SRC_DIR,
                loader: "babel-loader", 
                query: {
                    presets: ["react", "es2015", "stage-2"]
                }
            },
            {
                test: /\.svg$/,
                use: [
                  "babel-loader",
                  {
                    loader: "react-svg-loader",
                    options: {
                      svgo: {
                        plugins: [
                          { removeTitle: false }
                        ],
                        floatPrecision: 2
                      }
                    }
                  }
                ]
            },
            {
                test: /\.(scss|sass)$/,
                loaders: ['style-loader', 'css-loader', 'sass-loader']
            },

            { 
                test: /\.css$/, 
                loader: 'style-loader!css-loader' 
            },
            {
                test: /\.(png|jpg|gif|woff|woff2|eot|ttf|svg)$/,
                loader: "url-loader",
                query: { mimetype: "image/png" }
            },

            {
                test: /\.html$/,
                loader: 'html-loader?attrs[]=video:src'
              }, {
                test: /\.mp4$/,
                loader: 'url-loader?limit=10000&mimetype=video/mp4'
            }

        ]

    }

Package.json

"dependencies": {
"font-awesome": "^4.7.0"
...}

When I try to use it like this

<i className="fas fa-user"></i>

it is not possible because when I run npm start I get following error on my terminal:

ERROR in ./node_modules/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0
Module build failed: 
 @ ./node_modules/css-loader!./node_modules/font-awesome/css/font-awesome.min.css 7:707-758
 @ ./node_modules/font-awesome/css/font-awesome.min.css
 @ ./src/app/index.js
 @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/app/index.js

I have read some solutions online and I have tried one with installing Font Awesome like:

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

Import:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faThumbsUp } from '@fortawesome/free-solid-svg-icons';

Use:

<FontAwesomeIcon icon={ faThumbsUp }/>

This works but how can I get it to work like it would normally work using Boostrap with this line of code:

<i className="fas fa-user"></i>

Answer 1

I finally found solution that works for me. I corrected few things.

1. webpack.config.js

I did few changes in my webpack.config I have changed these two things.

1.THING TO CHANGE

Old not working example:

{
  test: /\.svg$/,
  use: [
    "babel-loader",
    {
      loader: "react-svg-loader",
      options: {
        svgo: {
          plugins: [{
            removeTitle: false
          }],
          floatPrecision: 2
        }
      }
    }
  ]
},

New working example:

{
  test: /\.svg$/,
  use: [
    "babel-loader",
    {
      loader: "url-loader",
      options: {
        prefix: "font",
        limit: 10000,
        mimetype: "application/octet-stream",
        svgo: {
          plugins: [{
            removeTitle: false
          }],
          floatPrecision: 2
        }
      }
    }
  ]
},

2. THING TO CHANGE

Add this loaders:

{test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' },
{test: /\.woff(2)?(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=application/octet-stream" },
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader" },
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url-loader?limit=10000&mimetype=image/svg+xml" }

After I did changes in my webpack.config.js I didn't had any errors in my terminal but still icons where showed as a bordered square box. So in my html part I did this fix:

As a new version (5) of font awesome uses "fas" or "fab" instead of "fa" prefix I noticed that I was already using "fas" instead of "fa" so I switched again to "fa" and it works just fine.

This steps helped me to start using Font Awesome in ReactJs project.

Answer 2

You have configured your webpack to parse svgs with the following regex /\.(png|jpg|gif|woff|woff2|eot|ttf|svg)$/ which means that a file with anything after svg won't be parsed. If you look at the error, the file is shown to be ./node_modules/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0 which certainly won't match your regex

Change the regex to /.(png|jpg|gif|woff|woff2|eot|ttf|svg)(\?[\=\.a-z0-9]+)?$/ and it should work

 {
      test: /.(png|jpg|gif|woff|woff2|eot|ttf|svg)(\?[\=\.a-z0-9]+)?$/,
      loader: "url-loader"
 },