2

I keep getting a weird error on fontawesome fonts. First here are the steps that I took to insert the fonts:

  1. npm install font-awesome. This created a font-awesome directory in node_modules

  2. In my sass file (located in src/styles), I imported fontawesome using:

    @import '../../node_modules/font-awesome/scss/font-awesome';

  3. I copied the fonts from node_modules/font-awesome/fonts into src/fonts

Here is my react application directory structure:

/src
    /actions
    /reducers
    /components
    /fonts (fontawesome fonts are here)
    /styles
         /app.scss (font awesome imported here)
    /index.html
    /index.jsx
/test
/node_modules
/webpack.config.js

The error I get are the following (copied from browser console):

Failed to load resource: http://localhost:9090/c8ddf1e5e5bf3682bc7bebf30f394148.woff Failed to load resource: http://localhost:9090/1dc35d25e61d819a9c357074014867ab.ttf Failed to load resource: http://localhost:9090/d7c639084f684d66a1bc66855d193ed8.svg#fontawesomeregular

What am I doing wrong? $fa-font-path by default equals to ../fonts.

EDIT: Here is my webpack config for fonts:

  {
    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"
  },
Gasim
  • 7,615
  • 14
  • 64
  • 131
  • 1
    What do you have configured as `output.publicPath` in your Webpack config? Can you find the files mentioned in the browser console (`c8ddf....woff`) in your output directory? – robertklep Sep 19 '16 at 10:10
  • Wow thank you! After reading your comment, I went to Webpack docs to understand these variables and learned them. And now they are working :) – Gasim Sep 19 '16 at 10:38
  • look at this if you have problems with webpack font and publicPath https://github.com/guillaumevincent/webpack-bootstrap-fontawesome – Guillaume Vincent Oct 08 '16 at 08:45

0 Answers0