shakacode/bootstrap-sass-loader

Using the glyphicon set

mrozbarry opened this issue · 2 comments

mrozbarry commented

I'm firstly not sure if this is a problem with this loader, or I just have a poor grasp on webpack.

Here is my app configuration.

Do I need to use a special loader to get those font files working? I've been trying to figure this out for two days. I know I can do this the wrong way and just copy the font files into public/fonts, but I want to know the correct way to do this.

Any thoughts/ideas?

justin808 commented

You need a @font-face for custom fonts. I'm looking into the glyphicons. That should be working without doing anything special.

This is how I did this for a sass file used in both a Rails and Webpack Dev Server.

Full details here: https://github.com/justin808/react-webpack-rails-tutorial.

Note, the latests 3.x beta version of node sass is removing the image-url helper. I'm going to follow a similar strategy for that. I'm updating the example today.

Please confirm this fixes your issue and I'll close this issue.

// Define a custom font.
// Libsass, which is used by the webpack sass loader, does not support font-url()
// so we use url() instead. This is a known issue.
@font-face {
  font-family: 'OpenSans-Light';
   src: url('assets/fonts/OpenSans-Light.ttf') format('truetype');
}
justin808 commented

@mrozbarry I updated both https://github.com/justin808/bootstrap-sass-loader and https://github.com/justin808/bootstrap-sass-loader-example.

The example now shows

  1. glyphicons working.
  2. option for config.debug which shows the $icon-font-path

fe46c43