Why do my bootstrap glyphicons get rendered to Chinese characters?

Question

I'm using bootstrap with a customized version of bootstrap.css version 3.1.1 using their Customize page. The only setting I changed was @grid-float-breakpoint setting to @screen-desktop. The contents of my customized bootstrap.css can be found here.

My glyphicon span looks like:

<span class="glyphicon glyphicon-ok form-control-feedback"></span>

and renders to:

The glyphicon-remove span also renders as a chinese character.

<span class="glyphicon glyphicon-remove form-control-feedback"></span>

and renders to:

Answer 1

Copying over the font files to the server again and clearing my browsers' caches has resolved this problem. I don't understand how both browsers had cache problems, but that's what fixed the issue.

Answer 2

I found this too. For me I had previously moved the bootstrap.min.js to after the html body where I saw the chinese characters on slower networks. Moving the bootstrap.min.js back to the top resolved this for me.

One solution might be to not have any glyphicons in the visible area of the page on the initial load or place a loading panel above your content until the page is loaded. For instance like this example http://pathgather.github.io/please-wait/

I wanted to move the bootstrap.min.js to improve load times (above-the-fold content). Running https://developers.google.com/speed/pagespeed/insights showed that moving it back to the top did not affect load times too much. I still have my other scripts loading at the bottom.