Glyphicon NOT showing

[thebarty]

Hi guys,

I am using reywood:bootstrap3-sass 3.3.5_2 with fourseven:scss 3.3.3_3 and the glyphicons are NOT working. Any ideas?

[reywood]

Could you paste the HTML you're using to display the glyphicon?

[thebarty]

Thats the one: <span class="glyphicon glyphicon-earphone"></span>

[reywood]

Could you post the contents of .meteor/packages and also confirm that you have @import '{reywood:bootstrap3-sass}/bootstrap'; in one of your *.scss files?

[elbowz]

I have the same issue.

Chrome console throw this errors:

Failed to decode downloaded font: http://172.18.66.6:3000/fonts/bootstrap/glyphicons-halflings-regular.woff2
(index):1 OTS parsing error: invalid version tag

I have set @import '{reywood:bootstrap3-sass}/bootstrap';

[reywood]

What version of Chrome are you using? I've come across some reported issues with fonts in certain versions of Chrome.

[elbowz]

Chromium 46.0.2490.80 (Build) (a 64 bit)

thanks!

[reywood]

Please try cloning and running this meteor project.

[derwaldgeist]

+1

The font path is not set correctly in this package.

Bootstrap defaults to '../fonts' here:
https://github.com/englue/meteor-bootstrap3-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss#L83

which results in a link to:

/fonts/bootstrap/glyphicons-halflings-regular.ttf

To make it work, the package should include an override for $icon-font-path, like this:

$icon-font-path: "/packages/reywood_bootstrap3-sass/assets/fonts/bootstrap/";

As a temporary workaround, this line can also be used before importing the SCSS from the package:

$icon-font-path: "/packages/reywood_bootstrap3-sass/assets/fonts/bootstrap/";
@import "{reywood:bootstrap3-sass}/bootstrap";

[reywood]

@derwaldgeist The $icon-font-path is overridden here. If you use @import "{reywood:bootstrap3-sass}/bootstrap";, you shouldn't need to set it yourself.

[derwaldgeist]

Strange. At least for me, it did not include this path. It only worked after I did it manually.