CODEWITHSUNDEEP
csstwitter-bootstrap-3glyphicons
Rahul Satal
Rahul Satal

Reputation: 2237

Bootstrap Glyphicons not rendering using local Bootstrap version

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:

enter image description here

Snapshot when bootstrap.min.css file included:

enter image description here

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

enter image description here

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.

Upvotes: 12

Views: 37059

Answers (2)

Rahul Satal
Rahul Satal

Reputation: 2237

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.

Upvotes: 0

rnevius
rnevius

Reputation: 27112

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.

Upvotes: 28

Related Questions