Glyphicons Rendering as Empty Box

Glyphicons rendering as empty box

Not really a solution, but I ended up just using the Bootstrap CDN: http://www.bootstrapcdn.com/

Glyphicons rendering as empty box in one environment, but not the other

You glyphicon show up as square because it fails to load the fonts. Make sure there are no restrictions on the fonts folder. These are the reasons I can think of that might help fix it:

• Font Folder missing on your deployment servers. Fix: check your bootstrap/web files and make sure you copy everything well and that the font folder exist with fonts in it.

Font folder is wrongly placed. The font folder is always one folder up the bootstrap.css file. Make sure your fonts and the folder containing your css are like this:

 bootstrap/
 ├── css/
 │   ├── bootstrap.css
 ├── js/
 │   └── bootstrap.min.js
 └── fonts/
    |__ glyphicons-halflings-regular.eot

Debugging: check your browser console if there is any "fail to load resources" error

• Check file after after if you still can't figure it out. There is surely a missing file somewhere or a file that can't be loaded.
• IE has some restrictions when it comes to fonts: check more here

Rails4 - Bootstrap 3 my glyphicons render as empty boxes

I'm not sure if this is the best thing to do, but I added this to my CSS:

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css")

They're back!

Why Glyphicons not show into text box in bootstrap?

Just check this code..

<div class="inner-addon left-addon">
    <i class="glyphicon glyphicon-user"></i>
    <input type="text" class="form-control" />
</div

css

/* enable absolute positioning */
.inner-addon { 
    position: relative; 
}

/* style icon */
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

/* align icon */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }

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.

Glyphicons don't get displayed properly

Use Resource Handler, which is a standard mechanism for defining and accessing resources. I see that your resources are placed in the right way to do that.

Try replace the paths on your css for something like this

#{resource['fonts:glyphicons-halflings.svg']}

Further information:

What is the JSF resource library for and how should it be used?

http://www.packtpub.com/article/jsf-images-css-and-js

---

Related Topics