Font-awesome Not Showing Icons (only Squares) With React And Webpack

I'm trying to use font-awesome with React and Webpack. I've installed font-awesome using npm: npm install font-awesome --save I've configured webpack properly and I can see that f

Solution 1:

What is the expected behavior? CSS property < font-family: FontAwesome !important > should be applied to font element by default (This CSS class is written in Font-Awesome.css file.) but due page or css load issue this property is not getting applied.

What went wrong? font-family is set to different font family instead of font awesome.

Does it occur on multiple sites: Yes

Is it a problem with a plugin? No

Does this work in other browsers? Yes Safari

The issue appears at random, but seems to happen more often on complex CSS websites.

Solution :: add CSS property < font-family: FontAwesome !important > in your code explicitly in your code.

yourcssfile.css

.fa{
    font-family: FontAwesome !important;
   }

Solution 2:

I had the same issue, before using this package. After installing it, configure it in the webpack.config.js file like this:

module.exports = {
  module: {
    loaders: [
      // the url-loader uses DataUrls.// the file-loader emits files.
      { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
      { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
    ]
  }
};

Edit: This one seems to be better ;)

Solution 3:

as of 2021, this is how you set up font awesome in your react-webpack project:

npm i @fortawesome/fontawesome-free

in top main file of your project

import"@fortawesome/fontawesome-free/css/all.min.css";

in the component that you want to use the icon:

<buttonclassName="button"    ><spanclassName="icon"><iclassName="fas fa-arrow-up"></i>{" "}
    </span></button>

you need two loaders, for woff file types, file loader, for svg , svg-url-loader

npm i svg-url-loader --save-dev
npm i file-loader --save-dev

in webpack.config.js

module: {
    rules: [
      { test: /\.(ts|tsx)/, loader: "babel-loader", exclude: /node_modules/ },
      { test: /\.css$/, use: ["style-loader", "css-loader"] },
      {
        test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name].[contenthash].[ext]",
              outputPath: "fonts/",
            },
          },
        ],
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: "svg-url-loader",
            options: {
              limit: 10000,
            },
          },
        ],
      },
    ],
  },