Font-awesome not loading icon in Bootstrap

Question

I am trying to do a simple require of Bootstrap and Font-awesome with Webpack. I managed to load Bootstrap CSS but Font-awesome is not working properly.

This is what I get as result:

My codes are given below. What is the wrong thing I am doing here?

Resource: Github code available here.

package.json

{
  "name": "",
  "version": "0.0.1",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack -w"
  },
  "license": "MIT",
  "devDependencies": {
    "css-loader": "^0.21.0",
    "expose-loader": "^0.7.0",
    "file-loader": "^0.8.4",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.6",
    "webpack": "^1.12.2"
  },
  "dependencies": {
    "admin-lte": "^2.3.2",
    "bootstrap": "^3.3.5",
    "bootstrap-webpack": "0.0.5",
    "exports-loader": "^0.6.2",
    "extract-text-webpack-plugin": "^0.8.2",
    "font-awesome": "^4.4.0",
    "font-awesome-webpack": "0.0.4",
    "imports-loader": "^0.6.5",
    "jquery": "^2.1.4",
    "less": "^2.5.3",
    "less-loader": "^2.2.1"
  }
}

Entry point: index.js

var $ = require('jquery');

require('expose?$!expose?jQuery!jquery');

require("bootstrap-webpack");
require('./node_modules/font-awesome/css/font-awesome.css');

require('./resources/css/style.css');


$('h1').html('<i class="fa fa-bars"></i> this is bootstrap');
console.log('hi there');

Webpack config file webpack.config.js

module.exports = {

    entry: './index.js',
    output: {
        path: 'public/assets/',
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    module: {
        loaders: [

            {test: /\.css$/, loader: "style!css!" },
            { test: /\.less$/, loader: "style!css!less!" },

            //bootstrap
            {test: /\.(woff|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'},

            //font-awesome
            { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
            { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }



        ]
    },

} 

Answer 1

Check your F12 debug console and see web browser details about error for the given files.

Your web server is not serving .woff and .woff2 files with correct mime type, and therefore they are not loaded at all from browser-client perspective.

You need to modify web-server side to add support for .woff files, for instance on IIS Express in Web.config you should have:

  <system.webServer>
    <staticContent>
      <mimeMap fileExtension="woff" mimeType="application/font-woff" />
      <mimeMap fileExtension="woff2" mimeType="application/font-woff" />
    </staticContent>
  </system.webServer>

and inside webpack.config.js you should have module loader like

    {
        test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
        loader: 'url-loader'
    }

Answer 2

I know this is 1 year old question, but just in case anyone end up in this from Google:

There is a known issue from css-loader generating wrong file paths. This won't happen in production build, but still annoying when it render squares in development mode.

Until this issue is fixed, you can disable css-loader source map to see the font rendered correctly in development. Find somewhere in your webpack config that write css?sourceMap and change it to css.