Getting Bootstrap Glyphicons to work with Webpack

Question

I'm trying to load up bootstrap using webpack. The css works just fine, but the glyphicons seem to break by showing a square (see below). No console errors

module.exports = {
    entry: "./public/app/main.js",
    output: {
        path: __dirname + '/public/dist/',
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { 
                test: /\.css$/,
                loader: "style-loader!css-loader" 
            },
            {
                test: /\.less$/,
                loader: "style!css!less"
            },
            { 
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
                loader: "url-loader?limit=10000&mimetype=application/font-woff" },
            { 
                test: /\.(ttf)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
                loader: "url-loader?limit=10000&mimetype=application/octet-stream" 
            },
            { 
                test: /\.(eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
                loader: "file" 
            },
            { 
                test: /\.(svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
                loader: "url-loader?limit=10000&mimetype=image/svg+xml" 
            },

        ]
    },
    node: {
        fs: "empty"
    }
};

<i class="done-icon glyphicon glyphicon-ok"></i>

Answer 1

Try this:

loaders: [
  {
    test: /\.css$/,
    loader: 'style-loader!css-loader'
  },
  {
    test: /\.png$/,
    loader: 'url-loader?limit=100000'
  },
  {
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'url-loader?limit=10000&mimetype=application/font-woff'
  },
  {
    test: /\.(ttf|otf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?|(jpg|gif)$/,
    loader: 'file-loader'
  }
]

and your javascript (assuming npm and modules):

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';

Just a heads up that webpack is going to put the font files in the same directory as your bundle.js file so you may need to ensure that your index.html file is also copied to your dist folder so the path references are correct.