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.

Answer 2

Finally my problem is resolved. Actually the problem was while using Glyphicons in our website like in django, we also have to copy font folder from bootstrap-3.3.2-dist folder downloaded from bootstrap official link

Another problem is where to fix it. See this structure where fonts is respect to css file and then paste fonts folder.

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

But it worked for me in django just inside static folder.