Twitter bootstrap glyph icons are not loading

Question

This is such a dumb issue, but here we go anyway. Here is my basic structure

/Content/twitter/bootstrap.css
/img/glyphicons-halflings.png

So Content and img are both in my root directory, so to referent the glyph image from my bootstrap.css file I have it like this:

background-image: url("../../img/glyphicons-halflings.png");

Y U NO SHOW?

Is there a .js file I need to check to make sure it is looking in the right directory??

oh and here is a snippet of where I am trying to get the image to render:

 <td>
                @if (item.Something == true)
                {
                    <i class="icon-ok"></i>
                }
                else
                {
                    <i class="icon-remove"></i>
                }
            </td>

UPDATE

There's been a lot of views of this question, so I thought I would share my two cents on it. One note, since posting the question BS 3.0 is now out, so it is possible the structure is different and/or irrelevant, have not looked at it yet. But if you got here, keep in mind this is pre-3.0 Bootstrap.

One thing I have started doing that makes it so I do not really have to mess with anything is bring the entire bootstrap folder into the project, rather than just the css/js/img folders. I typically put it in my root scripts folders with a structure like this:

/scripts
     /libs
          /boostrap <-- the unzipped folder you get when downloading
              /js
              /css
              /img

This may break some conventions since a 'scripts' folder should really just hold scripts. I justify it since I use the scripts folder for scripts (surprise!) and third party libraries (thus the libs folder). Most third party components you get have at least js and css files with them, and I just got too lazy to can them manually separated since some libraries (like bootstrap) rely on where the other files are.

Anyway, my two cents, take a look at the answers below if you want to alter the file locations. All great tips, thanks SO folks!

score 3 · Accepted Answer · answered Dec 13 '12 at 05:55

3

Your current code should technically work and there is no need of any js file..

background-image: url("../../img/glyphicons-halflings.png"); is perfectly fine for a directory structure like

/Content/twitter/bootstrap.css
/img/glyphicons-halflings.png

You may try this code below to ensure that things are fine..

<td><i class="icon-ok"></i></td>

If this also fails then double check that glyphicons-halflings.png exists at your said path alongwith sufficient privileges..

answered Dec 13 '12 at 05:55

000

3,976
4
25
39

Yeah I have another place in the table where it is exactly this: and still nothing. Very wierd issue. – ledgeJumper Dec 13 '12 at 06:01
have you checked if the file _glyphicons-halflings.png_ exists on the server and is rendered correctly..?? – 000 Dec 13 '12 at 06:25
Open the page in Chrome, right-click on where the glyph should show, and click "inspect element". This will bring up Chrome's developer tools...find your ` – Jeromy French Dec 13 '12 at 20:11
@JeromyFrench I am inspecting it as you say, and I don't even see the background css rule in there anywhere. – ledgeJumper Dec 13 '12 at 20:37
@RishiKalia I am running this localhost and I have no issues accessing anything in that folder. – ledgeJumper Dec 13 '12 at 20:38
what do you see in browser if you try render glyphicon image like this - ``..?? – 000 Dec 14 '12 at 04:55
1

Hmm...let's back up a little. Open the CSS file in your browser and search for 'glyphicons', just to make sure they're even making the CSS. If it is, search for 'icon-ok'. – Jeromy French Dec 14 '12 at 14:12
For those using Rails and LESS I'd recommend placing the images in the `[APP_ROOT]/vendor/assets/images/bootstrap` directory. In this way you can have the asset pipeline look them up instead of hardcoding their URLs. So, you'd need to: 1) rename the bootstrap.css file to bootstrap.css.less 2) update the two lines referencing the glyphicons images, ex. `background-image: url("../img/glyphicons-halflings.png");` becomes `background-image: asset-url("glyphicons-halflings.png");` 3) repeat steps (1) and (2) for bootstrap.min.css – schmielson Oct 29 '13 at 23:20

Zack · Answer 2 · 2012-12-13T14:33:10.747

0

try this

background-image: url("/img/glyphicons-halflings.png");

I changed the path from a relative path to an absolute path. By adding the slash at the beginning of the path, it starts from the root of your site.

Let me know if that works for you.

edited Dec 13 '12 at 14:33

answered Dec 12 '12 at 21:51

Zack

2,789
33
60

Opening with forward slash represent the root – Rajiv Pingale Dec 13 '12 at 06:01
why the downvote exactly? It seemed like a viable suggestion to me. – ledgeJumper Dec 13 '12 at 06:02
I have another question. Do you have other things in the css file besides that one line so far? I just wonder because I have had problems when starting to build sites where I didn't link to the css file correctly from the html page – Zack Dec 13 '12 at 14:10
@davidisawesome After reading Rajiv Pingale's response I looked up what he meant because he didn't explain very thoroughly. I found [this question on SO](http://stackoverflow.com/questions/7613274/why-would-a-developer-place-a-forward-slash-at-the-start-of-each-relative-path) – Zack Dec 13 '12 at 14:28
I also updated my answer to use the information from the answers to that question. – Zack Dec 13 '12 at 14:34

score 0 · Answer 3 · answered Mar 06 '13 at 22:47

I encountered this same issue and it is not related to the source or location of your glyphicons. This is a race issue. I unfortunately cannot tell you the reason why it behaves like this in tables... but I know in my dataTables this was occuring and my way around it was to add the glyphicons after the page and tables load by appending html. It's not perfect but it works.

score 0 · Answer 4 · answered Apr 18 '13 at 22:58

This may be an old post but I hope it helps someone else looking for an answer to this problem.

The file I downloaded contains an underscore but the CSS is looking for a file with a dash between glyphicons and halflings. Change one or the other and make sure it is uploaded to the correct folder on your server.

score 0 · Answer 5 · answered Sep 12 '13 at 13:48

Copy the glyphicons-halflings.png & glyphicons-halflings-white.png From img Folder.
make a sub-folder with name "img" in css folder.
Paste the both glyphicons-halflings.png & glyphicons-halflings-white.png in css->img folder.
Open your bootstrap stylesheet e.g. Let's Say bootstrap.css in text Editor.

Find (Ctrl+F) "icon". 6.You will find the class.

[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
margin-top: 1px;
*margin-right: .3em;
line-height: 14px;
vertical-align: text-top;
background-image: url("../img/glyphicons-halflings.png");
background-position: 14px 14px;
background-repeat: no-repeat;
}

change the background image url to

background-image: url("img/glyphicons-halflings.png");

find "glyphicons-halflings-white.png"
Change it's path also. And Bingo! you are on it.

score 0 · Answer 6 · answered Sep 15 '13 at 17:48

I encountered this same problem today and it had me confused. As Rishi says above, it should work, but it just didn't. I triple-checked my directory structure. Then eventually I realised that it wasn't hitting my glyphicons file at all. I removed this offending line of css:

<link href="css/font-awesome.min.css" rel="stylesheet"> <!-- remove me -->

And everything was good!

Remember that if you're going to include font-awesome, then it will look for the font files instead of the glyphicons file. So either add the appropriate fonts, or just use plain old bootstrap.

score 0 · Answer 7 · answered Oct 05 '14 at 06:08

The glyph icons load only when you have the following files in the fonts folder. glyphicons-halflings-regular.eot, glyphicons-halflings-regular.svg, glyphicons-halflings-regular.ttf and glyphicons-halflings-regular.woff.

Download the theme template or the carousel template of bootstrap, and you'll find these files there.

To know where to place these files in your web folder, just run Link Checker or Xenu's link sleuth and it'll show you where to place those files.

Twitter bootstrap glyph icons are not loading

7 Answers7