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.

CommentFileSizeAuthor
#9 glyphicons-base.ddev_.local-2018.06.12-09-58-54.png134.38 KBMrPaulDriver
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

scott.whittaker created an issue. See original summary.

markhalliwell’s picture

markhalliwell
Primary language English
CreditAttribution: markhalliwell at Tag1 Consulting commented
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 https://drupal-bootstrap.org/api/bootstrap/docs%21Contributing.md/group/...

Reason: CSS/site specific

scott.whittaker’s picture

scott.whittaker CreditAttribution: scott.whittaker as a volunteer commented

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

medinasod CreditAttribution: medinasod commented

The same thing is happening for me. My compiled CSS is looking for the icons here:
/themes/my_theme/dist/bootstrap/assets/fonts/bootstrap/

but they're located here
/themes/my_theme/bootstrap/assets/fonts/bootstrap/

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

Thanks!
Rob

kevineinarsson’s picture

kevineinarsson CreditAttribution: kevineinarsson commented

#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

Bobby Endarr Ramdin CreditAttribution: Bobby Endarr Ramdin as a volunteer commented

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

Bobby Endarr Ramdin CreditAttribution: Bobby Endarr Ramdin as a volunteer commented
mimran’s picture

mimran CreditAttribution: mimran commented

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/';
MrPaulDriver’s picture

MrPaulDriver CreditAttribution: MrPaulDriver commented
FileSize
glyphicons-base.ddev_.local-2018.06.12-09-58-54.png134.38 KB

I can't get this working in a node edit modal

---

EDIT
I did not have Boostrap modals enabled in theme settings, and now that I have, this is not longer a problem.

tony_addyman’s picture

tony_addyman CreditAttribution: tony_addyman commented

I too have been affected by the @at-root issue described above. I am in the process of replacing my Zen-based subtheme with a Bootstrap-based subtheme. Therein lies the cause of the trouble. I was using an old version of compass and sass to suit Zen. This version of sass did not implement @at-root, so it was copied across to the output css file. Updating the versions of compass and sass fixed the problem.

GuyManDude’s picture

GuyManDude CreditAttribution: GuyManDude commented

I have decided to use a non-cdn strategy and converted my 7x subtheme to stand alone. I have the CSS and JS working fine but the glyphicons are not working. I didn't have the fonts folder so I created one and copied the various font files Mark made available on Github into it. I set the file and directory permissions but they still don't work. I have cleared the cache and restarted Apache but still no dice.

I must be missing something.

BTW, not sure if it makes any difference but when I originally created the subtheme there was only a startkerkit called THEMENAME which I used. I have seem mention of SASS and LESS starter kits but as I said, I did have either of those available.

I would appreciate any thoughts please. Thank you.