3

I have a strange problem in my ASP.NET MVC application: bootstrap glyphicons not shown in IE and Safari,but successfully shown in the Google Chrome and FireFox.

I'v checked that in less files I have right path to files with fonts(.eot and other). But it does't work in IE and Safari. When view html and css in browser inspector, I see that class for glyphicon has attribute content that striked, but in Chrome it is not striked. I'v also swith on allow font load in the IE setting but it does't help. I'm using Bootstrap 3.3.6.

I have this issue in the IE 11 and the Edge and the Safari.

Please, tell me how to figure it out?

Update.

            <p class="input-group">
                <input name="startDate" type="text" uib-datepicker-popup="{{format}}" ng-model="startDate" is-open="status.startDateOpened" datepicker-options="dateOptions" close-text="Close" />
                <span class="input-group-btn">
                    <button type="button" class="btn btn-default" ng-click="openStartDate($event)"><i class="glyphicon glyphicon-calendar"></i></button>
                </span>
            </p>
J.Doe
  • 31
  • 1
  • 3

1 Answers1

1

After some StackOverflow searching, it seems that this problem has been encountered before. The problem might be involving the HTTP header Cache-Control: no-cache for the font. While this will work fine with HTTP, over HTTPS it causes Internet Explorer to ignore the downloaded font.

My best guess is that it's a variation of this behaviour: http://support.microsoft.com/kb/815313

So, if you're seeing IE work through each font in the Developer Tools network view, it might be worth checking if you have a Cache-Control header and removing it.

A reference to another case: Bootstrap (v3.3.4) glyphicons not displayed in IE when refresh page (F5)

And another, the original possible solution I found: @font-face EOT not loading over HTTPS

Community
  • 1
  • 1
Stas Christiansen
  • 192
  • 1
  • 7