less-loader: Problem with font-awesome

The file-loader isn’t matching the font url due to the passed arguments, ?v=4.4.0, at the end.

I use the following to catch the any passed arguments, notice the (?.*$|$) instead of a plain $

test: /\.(jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/,

I think I was getting this issue due to the url being too long as well as the regex being off.

This seems to have fixed it for me although I suspect the regex @hoffin posted would work too:

{ test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/
, loader: 'url?limit=100000&name=[name].[ext]'
}

I was bundling the scss with my own scss file, so I found that overriding the font path default variable worked for me:

$fa-font-path: "~font-awesome/fonts/";
@import "~font-awesome/scss/font-awesome";

Also, the loader config listed here has a nice regex test: https://www.npmjs.com/package/font-awesome-webpack-2

Did this end up getting resolved? I am also having this issue, even with using the solution @hoffin suggested. Here are my loaders:

    module: {
        loaders: [
            { test: /(\.js$)|(\.jsx$)/, exclude: /node_modules/, loader: 'babel-loader' },
            { test: /(\.jade$)/, exclude: /node_modules/, loader: 'jade-loader' },
            { test: /(\.css$)/, exclude: /node_modules/, loaders: ['style-loader', 'css-loader', 'postcss-loader'] },
            { test: /(\.styl$)/, exclude: /node_modules/, loaders: ['style-loader', 'css-loader', 'stylus-loader'] },
            { test: /\.(jpe|jpg|woff|woff2|eot|ttf|svg)(\?.*$|$)/, exclude: /node_modules/, loader: 'url-loader?importLoaders=1&limit=100000' },
            { test: /\.jsx$/, exclude: /node_modules/, loader: 'react-hot-loader' }
        ],
    }

And here is the error I am receiving:

ERROR in ./~/font-awesome/css/font-awesome.css
Module parse failed: /Users/Username/Documents/Project/sub-project/node_modules/font-awesome/css/font-awesome.css Line 7: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
| /* FONT PATH
|  * -------------------------- */
| @font-face {
|   font-family: 'FontAwesome';
|   src: url('../fonts/fontawesome-webfont.eot?v=4.4.0');
 @ ./client/app.js 83:0-60

I’m using webpack 2.2.1^ and i had to use this confguration:

    module: {
        rules: [
            ...
            { 
                test: /.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
                use: "url-loader?limit=100000"
            }
        ]
    },

@fellz Moving the $|$) end of line outside of the capture group like so /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/ yields the same result with less redundancy.

@ alexsasharegan - Your solution to change the variable in the font awesome _variables.scss worked for me dude!

old value: $fa-font-path: “…/fonts” new value: $fa-font-path: “~font-awesome/fonts/”;

My setup: NG CLI created barebones project that I added font awesome to.

@alexsasharegan your solution worked for me! thanks a bunch!

Node JS: Install the below command npm i --save @fortawesome/fontawesome

I use the Font Awesome module, and here’s what worked for me :

output: publicPath: '/',

module.rules:

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

using the copy-webpack-plugin and the extract-text-webpack-plugin, add this to plugins:

    new Copy([
      { from: 'node_modules/font-awesome/fonts', to: 'fonts' },
      { from: 'node_modules/font-awesome/css/font-awesome.min.css' },
    ]),
    new ExtractTextPlugin('style.css')

I also had a similar error when I had

{
  test: /\.jsx?$/,
  loader: 'babel-loader',
  include: [
    resolve(__dirname, './src/')
  ]
}

I resolved the issue by adding

resolve(__dirname, './node_modules/react-icons/fa/')

to the include array.

I encountered this issue But according to answer I has fixed this issue Thanks