CODEWITHSUNDEEP
javascriptreactjsfont-awesome
Felix
Felix

Reputation: 5619

webpack using font awesome

in my react app I want to use fontawesome css files with webpack and the css loaders. my configuration looks like this:

webpack config

module: {
    rules: [
      {
        test: /\.js?$/,
        loader: 'babel-loader',
        options: {
          presets: [
            ["es2015", { modules: false }],
            "stage-2",
            "react"
          ],
          plugins: [
            "transform-node-env-inline"
          ],
          env: {
            development: {
              plugins: ["react-hot-loader/babel"]
            }
          }
        }
      }, {
            test: /\.(eot|ttf|woff2?|otf|svg|png|jpg)$/,
            loaders: ['file']
        },
      {
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: true,
              sourceMap: true,
              importLoaders: 1,
              localIdentName: "[name]--[local]--[hash:base64:8]"
            }
          },
          "postcss-loader" // has separate config, see postcss.config.js nearby
        ]
      },
    ]

in index.js I have this:

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

and in the render method i have this:

<li><NavLink to="/dashboard" className="fa fa-bars" activeClassName="activeSidebar"
                                         aria-hidden="true"></NavLink></li>

There are noe errors, but also no icons displayed ... whats my mistake?

Thanks

Upvotes: 1

Views: 1130

Answers (4)

Felix
Felix

Reputation: 5619

Solution that worked for me is to add the css files in my www/index.html

then I can use the css like this:

<div className={`row`}>

Same with bootstrap and fontawesome

Upvotes: 0

Patrick Ferreira
Patrick Ferreira

Reputation: 2053

well, in my case, I shall add a small pattern after the extension for the url-loader and some include / exclude instructions.

This is because we want to have different tools for our css and imported ones.

The pattern added in url-loader is to handle import from font-awesome.css because they look like : src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');

Here is the extract of my webpack.config.js file : 

  {
    test: /\.css/,
    loaders: [
      'style-loader',
      `css-loader?${JSON.stringify({
        sourceMap: isDebug,
        // CSS Modules https://github.com/css-modules/css-modules
        modules: true,
        localIdentName: isDebug ? '[name]_[local]_[hash:base64:3]' : '[hash:base64:4]',
        // CSS Nano http://cssnano.co/options/
        minimize: !isDebug,
        camelCase: 'dashes',
      })}`,
      'postcss-loader',
    ],
    exclude: [
      path.resolve(__dirname, './node_modules/font-awesome'),
    ],
  },

// ...
  {
    test: /\.css/,
    loaders: [
      'style-loader',
      'css-loader',
    ],
    include: [
      path.resolve(__dirname, './node_modules/font-awesome'),
    ],
  },
 // ...

{
  test: /\.(png|jpg|jpeg|gif|woff|woff2)(\?.*$|$)/,
  loader: 'url-loader?limit=10000',
},

Upvotes: 1

Sebastianb
Sebastianb

Reputation: 2060

If you're working with Webpack 2, you should always add the -loader suffix after each loader's name. Here's my portion of code that works correctly in my webpack.config.js:

        {
            test: /\.(png|woff|woff2|eot|ttf|svg)$/,
            use:[{
                loader: 'url-loader',
                options:{
                    limit: 100000,
                    name: 'assets/resources/[name].[ext]'
                }
            }]
        }

I'm using url-loader, but in this case it should work with file-loader too.

Upvotes: 1

JusMalcolm
JusMalcolm

Reputation: 1431

You may need to add a name argument to the loader that handles the font files.

eg:

...
{
 test: /\.(eot|ttf|woff2?|otf|svg|png|jpg)$/,
 loader: 'file-loader?name=./[name].[hash].[ext]'
},
...

Upvotes: 1

Related Questions