Bootstrap 3 and glyphicons (fonts)

[alvipeo]

I finally found the setup that works with Bootstrap (I had problems with tests when using Bootstrap 4 alpha). So now I use Bootstrap 3 and almost everything works - the app and the tests.

The only issue I have now with glyphicons and bootstrap fonts. For example, when I use

<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>

the icon is not loaded and here's what I get in the console:

browser_adapter.js:170 GET http://192.168.1.2:3000/node_modules/bootstrap/fonts/glyphicons-halflings-regular.woff2 - 404

Obviously, nothing like 'node_modules/...' exists so how do I set it up with webpack?

Currently, I use .less and these loaders:

 {test: /\.less$/, loader: 'raw-loader!less-loader'},
      {test: /\.(png|jpg|gif)$/, loader: 'file-loader'},
      //{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
      {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&minetype=application/font-woff"
      }, {
        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&minetype=application/font-woff"
      }, {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&minetype=application/octet-stream"
      }, {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: "file"
      }, {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: "url?limit=10000&minetype=image/svg+xml"
      }

Please help with this one. That's the only issue (for now) that stops me from using term 'an ideal web app setup for Angular 2' :)

[ebeal]

This is a duplicate of #508

[alvipeo]

ok, added link to bootstrap css in my index.html and got it working! thanks!

[ovo4096]

@alvipeo Can you tell me how to do it?

[alvipeo]

I just added to bootstrap cdn in my index.html

[ovo4096]

@alvipeo But I hope that can be referenced in the project. What better way thing?

[alvipeo]

I couldn't make glyphicons work. Only referencing bootstrap css from index.html.

[trsh]

+1. Anybody?

[gjdass]

+1, I referenced ng2-bootstrap which is working (loading the NgModule into app.module and it's fine, all component loaded everywhere). But 404 on icons -> GET
http://localhost:3000/fonts/bootstrap/glyphicons-halflings-regular.woff2

Any idea ? I don't wanna use remote ones by inserting a line in index. I wanna use those stored in node_modules. Is there a way to tell webpack to copy fonts from node_modules or something ?

[ShakurOo]

+1, same problem here...

[ghost]

+1 user bootstrap4 ,not add .bootstraprc file. the glyphicons is build , but browsers add <span class="glyphicon ..."></sapn> not show .