Bootstrap Glyphicons not rendering using local Bootstrap version

大憨熊 提交于 2019-12-06 20:50:09

问题


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.


回答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.




回答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.



来源:https://stackoverflow.com/questions/28645733/bootstrap-glyphicons-not-rendering-using-local-bootstrap-version

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!