Cannot load font awesome with webpack

Question

This appears to be such a common problem, but the other questions I've seen don't have the symptoms I do.

I am using the font-awesome npm package with React, Scss and Webpack. (I tried font-awesome-webpack and some others but they didn't work for me.) I'm not using Bootstrap.

I followed the directions of many questions in SO, tutorials, etc, but the same thing seems to happen. Either an error, or I get symbols on the page where the icons should be (e.g. I get ~ instead of a download icon)

In my react view: <span className="fa fa-download"/> (it's rendered as ~)

Top two lines of my main.sass:

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

In webpack.config.js (I've tried lots of permutations of the following with no success):

{ 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" }

In package.json, I have font-awesome installed in the dependency list, as well as file-loader, css-loader, style-loader, sass-loader, and url-loader in devDependencies.

The font on the rendered HTML element in question shows font-family: FontAwesome. There are no 404s or other issues in the console.

Can someone tell me what I'm doing wrong?

You've got to wonder that when nothing you try works, even a loader specifically designed for the task, that you're really doing something horribly wrong fundamentally. Rather than only share snippets you might show more details about your project, like where you store files and what the full webpack file looks like. If you're interested in properly fixing this problem and probably more future problems to come. — Gimby, Jan 12 '17 at 08:53
Someone I know did say that they had an awful time getting FA to work as well. The documentation isn't great, which doesn't really help :/ — a user, Jan 12 '17 at 09:15
Sorry I can't help as I'm having a similar problem, but as Gimy says you should post the full files. — Rob Clayburn, Mar 02 '17 at 10:23

score 0 · Answer 1 · answered Jan 12 '17 at 07:28

You can try by specifically mentioning the loader and mime type for each font types as shown below.

module: {
    loaders: [{
      test: /\.css$/,
      loader: 'style!css?sourceMap'
    }, {
      test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=application/font-woff"
    }, {
      test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=application/font-woff"
    }, {
      test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=application/octet-stream"
    }, {
      test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
      loader: "file"
    }, {
      test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
      loader: "url?limit=10000&mimetype=image/svg+xml"
    }]
  }

The complete gist is here

Thanks for your answer. I replaced my loaders with these, restarted the npm server, and still no change :/ — a user, Jan 12 '17 at 08:38

score 0 · Answer 2 · answered Jan 12 '17 at 08:43

0

OK, I ended up adding

<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">

to my index.html file. I'm surprised I had to do this. I'd rather have avoided it! But there you go.

answered Jan 12 '17 at 08:43

a user

115
1
11

I haven't marked it as the answer because it didn't really solve it. It's more of a stopgap. – a user Feb 24 '17 at 03:11

Farisah Chan · Answer 3 · 2017-10-11T00:54:39.743

you can try to set the public path with the loader so that it will point font-awesome to the right path after bundling

ie - publicPath=../

here is how i set mine in webpack.config.js

{ test: /\.(woff2?|svg)$/, 
  loader: 'url-loader?publicPath=../&limit=10000&name=fonts/[name].[ext]' 
},

// and the output css, which is working :

@font-face {
    font-family: 'FontAwesome';
    src: url(../fonts/fontawesome-webfont.eot);

// if not, it will not be able to locate the fonts path, 
// but css can traverse back from current directory with - "../"

without publicPath

{ test: 
     /\.(woff2?|svg)$/, 
     loader: 'url-loader?limit=10000&name=fonts/[name].[ext]' 
},

css output, which is not working

@font-face {
   font-family: 'FontAwesome';
   src: url(fonts/fontawesome-webfont.eot);

Cannot load font awesome with webpack

3 Answers3