Bootstrap 3 Unable to Display Glyphicon Properly

Bootstrap 3 unable to display glyphicon properly

OK, my problem was not answered by the above. I had the fonts folder at the same location as the bootstrap css and js folders (eg /theme/bootstrap3/..), but it was looking for the font folder in the root (eg /fonts/glyph.. .woff)

The solution for me was to set the @icon-font-path variable to the correct relative path:

Eg @icon-font-path: "fonts/";

Bootstrap 3 Glyphicons are not working

I was looking through this old question of mine and since what was supposed to be the correct answer up until now, was given by me in the comments, I think I also deserve the credit for it.

The problem lied in the fact that the glyphicon font files downloaded from bootstrap's customizer tool were not the same with the ones that are downloaded from the redirection found at bootstrap's homepage. The ones that are working as they should are the ones that can be downloaded from the following link:

http://getbootstrap.com/getting-started/#download

Anyone having problems with old bad customizer files should overwrite the fonts from the link above.

Bootstrap 3 Glyphicons not showing correctly

So my problem ended up being where bootstrap was in relation to my index.html. Below is the file structure before and after. I was hoping to just have a general bootstrap folder that I could point to file developing multiple web app ideas, but it looks like boot strap is required to be at the same level as your index.html. By moving bootstrap into the same directory as the index.html, executing grunt dist in the bootstrap directory and using the explicit path of the bootstrap.min.css in .html references, I was able to get things to work properly. Wish I had a better understanding as to why this worked though.

Before                    After
├── webpage/              └── webpage/
|   └──index.html             ├──index.html
|                             └──bootstrap/
└── js/
    └──bootstrap/

Bootstrap 3 glyphicons not displaying correctly

You could use a .glyphicon-nonescaped class, to allow you to switch between default escaped and non-escaped glyphs :

HTML

<i class="glyphicon glyphicon-calendar glyphicon-nonescaped"></i>

CSS

.glyphicon-nonescaped.glyphicon-calendar:before { 
    content: "\d83d\dcc5";
}

jQuery

if($.browser.mozilla) {
    $('.glyphicon-nonescaped').removeClass('glyphicon-nonescaped');
}

Bootstrap glyphicons are displaying wrong images

Check for these lines in bootstrap.css and rectify the path to fonts folder accrodingly:

    @font-face {
  font-family: 'Glyphicons Halflings';

  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

Bootstrap doesn't show all glyphicon

This glyphicon is new so you need the new font. But you also need to add the correct class as well. Just changing the font-file will not add it. Replace your bootstrap.css file or add this to your existing file:

.glyphicon-sunglasses:before {
  content: "\e240";
}

Bootstrap3 - Glyphicons are not displayed in Chrome, only

Rather than fix your problem, I prefer to teach you how to fix your own problem.

1. Right click on the element and choose "Inspect Element". That will bring up a window showing you some useful information about the html and the CSS that's applied to it.
2. If it's a sprite image (as in Bootstrap 2), look at the CSS on the right hand side, looking for the top-most (un-crossed-out) background-image. See the url for the sprite image. If it's a glyphicon (as in Bootstrap 3), look for the font-family instead.
3. Go to the Network tab. You may need to refresh the page to get useful stuff there.
4. Look for where it loaded that sprite image or font (e.g. glyphicons-halflings-regular.woff). If it says it has a status of "304", that means it was loaded from the cache. In that case, clearing the cache and reloading the page might solve your problem.
5. If it wasn't a "304" status, you might have a problem where the web server isn't serving up the image (a "404" or similar status) or it's not coming up correctly for some reason.
6. If clearing the cache didn't solve the problem, click on the URL for the sprite image or font on the Network tab, and then click on the "Preview" tab. What you should be seeing is a block image that contains your icon and all the other icons, or the alphanumeric characters in that font. If this isn't what you're seeing, again there is probably something wrong with what your web server is serving up.
7. If the sprite image is correct, then there is probably something wrong with your CSS where you're accidentally overriding the background-position for the sprite. Again, go back to your Elements tab and look at the CSS that's generated.

---

Related Topics