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 https://cdnjs.cloudflare.com/.  

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>

</button>

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: