CODEWITHSUNDEEP
cssnpmfontsfont-awesomefont-awesome-5
Olga Kedel
Olga Kedel

Reputation: 25

Font-awesome 5 doesn't work with webpack when installing with npm

I want to install Font-awesome with npm so that it will work with webpack and babel.

I installed font-awesome with npm via

npm install --save-dev @fortawesome/fontawesome-free

And added this to the top of my index.js

import '@fortawesome/fontawesome-free/js/fontawesome'
import '@fortawesome/fontawesome-free/js/solid'
import '@fortawesome/fontawesome-free/js/regular'
import '@fortawesome/fontawesome-free/js/brands'

When I'm trying to add icons to my html e.g.

<i class="fas fa-like"></i>

It just shows a circle with a question mark

My webpack config

const path = require('path');
const webpack = require('webpack');
const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    main: ['webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000', './src/index.js']
  },
  output: {
    path: path.join(__dirname, 'dist'),
    publicPath: '/',
    filename: '[name].js'
  },
  mode: 'development',
  target: 'web',
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        // Loads the javacript into html template provided.
        // Entry point is set below in HtmlWebPackPlugin in Plugins
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            //options: { minimize: true }
          }
        ]
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(scss)$/,
        use: [{
          loader: 'style-loader', // inject CSS to page
        }, {
          loader: 'css-loader', // translates CSS into CommonJS modules
        }, {
          loader: 'postcss-loader', // Run post css actions
          options: {
            plugins: function () { // post css plugins, can be exported to postcss.config.js
              return [
                require('precss'),
                require('autoprefixer')
              ];
            }
          }
        }, {
          loader: 'sass-loader' // compiles Sass to CSS
        }]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './src/html/index.html',
      filename: './index.html',
      excludeChunks: ['server']
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ]
};

My .babelrc

{
  "presets" : ["@babel/preset-env"]
}

P.s. Everything works fine, it is just that my font-awesome icons aren't displaying properly.

Upvotes: 2

Views: 3391

Answers (1)

Temani Afif
Temani Afif

Reputation: 272638

You are using an invalid icon because there is no fa-like, you are probably looking for fa-thumbs-up instead:

<script  src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>
<i class="fas fa-like"></i>

<i class="fas fa-thumbs-up"></i>

You can easily seach for icons here: https://fontawesome.com/icons?d=gallery&q=like

Upvotes: 2

Related Questions