Wednesday, July 5, 2017

Bootstrap fonts not shown properly

I’ve run into this issue twice recently, both are caused by different reasons, so I want to note them down for future references.

Case 1

In this case, I am using bootstrap js and css from  
On a page, a couple buttons are not shown properly, they should show as in the left, instead they are shown as the right:
Check the css of these buttons, we can see their icon family is overridden. For example, with the refresh button:
<button class="btn btn-default" type="button" name="refresh" title="Refresh">
       <i class="glyphicon glyphicon-refresh icon-refresh"></i>
From the css, we see the font-family is overridden:
Clicking on the “computed” tab, we can see how it is overridden: the font-family is now icomoon and is defined:
The solution is to add this into css:
.glyphicon {

    font-family:'Glyphicons Halflings' !important;


Case 2

In this case, I downloaded bootstrap js and css and added them to my pages. The downloaded zip contains a fonts folder, which I didn’t put into my project, causing bootstrap fonts not shown properly. 

The solution is to put fonts folder into my project:

No comments:

Post a Comment