Glyphicons don't show but found solution

[billh93]

After installing this specific theme. The icons won't load and I found out the problem and solution but the route always changes.

Here is the problem:

Go under your directories until you get a file name that looks like this: 650abfa14b12f097a9b41e9c197b9c884241ae83.css

The path should be something like.
.meteor/local/build/programs/web.browser/650abfa14b12f097a9b41e9c197b9c884241ae83.css

Now look at that file and go down to line 336. It should say

@font-face {
font-family: 'Glyphicons Halflings';
src: url('packages/bootswatch_darkly/bootswatch/fonts/glyphicons-halflings-regular.eot');
src: url('packages/bootswatch_darkly/bootswatch/fonts/glyphicons-halflings-regular.eot?') format('embedded-opentype'), url('packages/bootswatch_darkly/bootswatch/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('packages/bootswatch_darkly/bootswatch/fonts/glyphicons-halflings-regular.woff') format('woff'), url('packages/bootswatch_darkly/bootswatch/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('packages/bootswatch_darkly/bootswatch/fonts/glyphicons-halflings-regular.svg') format('svg');

The path is incorrect it should be "packages/bootswatch_darkly/bootstrap/dist/fonts/".

I changed it and the glyphicon now appear. I however don't know how to dynamically change it. Which is why I'm on here. To solve this issue. in the mean time I'm just going to include the cdn links.

[shaneseaton]

The problem is the CSS pointing to the wrong location. In the package file, the bootrap content is imported into bootstrap/dist/fonts/, however the CSS is still pointing to bootswatch/fonts.

Either the CSS needs to change, or the import location does.

Fortunately, we can override the CSS so things work. The approach taken above is likely to only work on a local dev box.

Try adding this to a css file in your meteor app. Perhaps named bootswatch-hack.css:

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('packages/bootswatch_yeti/bootstrap/dist/fonts/glyphicons-halflings-regular.eot');
  src: url('packages/bootswatch_yeti/bootstrap/dist/fonts/glyphicons-halflings-regular.eot?') format('embedded-opentype'), url('packages/bootswatch_yeti/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('packages/bootswatch_yeti/bootstrap/dist/fonts/glyphicons-halflings-regular.woff') format('woff'), url('packages/bootswatch_yeti/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('packages/bootswatch_yeti/bootstrap/dist/fonts/glyphicons-halflings-regular.svg') format('svg');
}

Hope this helps someone.
Shane.

[demiters]

Thanks @shaneseaton !

Is there any hope the Atmosphere packages would get updated?

[splendido]

could you guys create a PR to fix this please?

[splendido]

cc @dandv

[splendido]

also:

• addFiles should now be changed to addAssets for static assets
• I don't think init.js actually manages to initialize tooltips and popovers: when the body rendered cb is called child templates are not yet rendered usually so it will work only for content placed directly inside the body from the main template

[firrae]

This fix doesn't seem to work with the paper theme? I added the lines above and swapped "bootswatch_darkly" to "bootswatch_paper" and still has the same issue.