Bootstrap Glyphicons not rendering using local Bootstrap version

Question

I am using bootstrap in django and it works perfectly for all other bootstrap classes except icon classes like: class="glyphicon glyphicon-download-alt"

Snapshot with error at right bottom:

Snapshot when bootstrap.min.css file included:

On doing inspect element it contain all glyphicons its snapshot is-

It only works if I link http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css in my html file; but it does'nt work if I include my bootstrap.min.css from my PC. Otherwise, every bootstrap class works perfectly. Hope you understand my problem. Thanks in advance.

Answer 1

It isn't working because you saved the CSS file from the CDN link. That won't work, because the glyphicons are linked to relative to that CSS file. Example:

@font-face{
    font-family:'Glyphicons Halflings';
    src:url(../fonts/glyphicons-halflings-regular.eot);
}

What this means, is that the downloaded Bootstrap file is looking for the glyphicons in a folder on your computer (which you don't have).

You need to properly download Bootstrap from the official download link. This official download contains a /fonts/ directory that contains the actual glyphicon font files.

Alternatively, you could change all of the font paths in the CDN file to be absolute links to the fonts on the CDN...but that doesn't really make sense.