Glyph icons aren't working on a Bootstrap subtheme. The markup is all there, but the font doesn't seem to load. Changing the backend theme to Bootstrap makes no difference, but changing the front end theme from the subtheme to plain Bootstrap does work.


scott.whittaker created an issue. See original summary.

markcarver’s picture

Category: Bug report » Support request
Status: Active » Closed (works as designed)

The only reason they wouldn't work in a sub-theme is if you're compiling your own (e.g. LESS/SASS) and you didn't copy over the necessary font files (or properly reference the location of them).

Closing per

Reason: CSS/site specific

scott.whittaker’s picture

I finally managed to track this down. The @font-face declaration for the glyphicon font was nested inside a @at-root declaration. Deleting the @at-root wrapper fixed the issue.

medinasod’s picture

The same thing is happening for me. My compiled CSS is looking for the icons here:

but they're located here

The dist directory is where my compiled assets live. What's the best way to fix this? Move the directory into dist?


kevineinarsson’s picture

#4, I ran into a similar issue. My solution was setting $icon-font-path before importing bootstrap to specify the font location.

Bobby Endarr Ramdin’s picture

my issue was resolved by editing variables.scss check the path there, so

//** Load fonts from this directory.
$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../bootstrap/fonts/bootstrap/") !default;
Bobby Endarr Ramdin’s picture

mimran’s picture

You need to change the glyphicon font path on the file "_default-variables.scss" as per your bootstrap source files location

// Set the proper directory for the Bootstrap Glyphicon font.
$icon-font-path: '../bootstrap/fonts/bootstrap/';