3

I am using the bootstrap v3.3.4 in application. I am also using some glyphicons. they work properly in FireFox, Chrome, and iPad, but they are not displayed in the Internet Explorer(Using IE10 & IE11) when you refresh the page (F5).

When the refresh page icon is not displayed but any button is clicked or page is reloaded for some severside action then the glyphicon appears and again when you refresh the page the glyphicon disappears.

Files structure:

  • Bootstrap >
    • CSS
    • Js
    • Fonts

Please give me solution for this.

<!DOCTYPE html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
    
 <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
</head>

<body>
 <div class="container"> 
         <p> <lablel>From:</label>
                <input type="text" class="form-control">
                <span class="glyphicon glyphicon-calendar"></span>
                <span class="glyphicon glyphicon-info-sign"></span> 

            </p>
         <p> <lablel>To:</label>
                <input type="text" class="form-control">
                <span class="glyphicon glyphicon-calendar"></span>
                <span class="glyphicon glyphicon-info-sign"></span> 

            </p>
 </div>

<script type="text/javascript" src="js/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Ram
  • 3,092
  • 10
  • 40
  • 56
user5118599
  • 31
  • 1
  • 4
  • Does same with svg icons? Like font awesome? – Justinas Jul 21 '15 at 11:11
  • Hi, I am not using font awesome. I am using bootstrap fonts wich provided in bootstrap package. Css font face. @font-face { font-family:'Glyphicons Halflings'; src:url(../fonts/glyphicons-halflings-regular.eot); src:url(../fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),url(../fonts/glyphicons-halflings-regular.woff2) format('woff2'),url(../fonts/glyphicons-halflings-regular.woff) format('woff'),url(../fonts/glyphicons-halflings-regular.ttf) format('truetype'),url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg'); } – user5118599 Jul 21 '15 at 11:17
  • Same problem with font awesome – user5118599 Aug 31 '15 at 12:32
  • Have you checked on other computers too? – Justinas Aug 31 '15 at 12:45
  • Yes, checked on other computers also, but same problem. Checked with version Font Awesome 4.4.0 – user5118599 Sep 08 '15 at 04:59
  • Just wanted to check how did you handled this scenario. I am running into the same issue now.. – Nikhil Das Nomula Sep 23 '15 at 02:23
  • Having the same issue. Glyphicons work fine on other browsers, but a refresh on IE 11 is enough to break them. – merrr Nov 13 '15 at 08:40
  • Could you please have a look at my answer on [Bootstrap glyphicon not showing in Form](http://stackoverflow.com/questions/35659094/bootstrap-glyphicon-not-showing-in-form/35660280#35660280)? – Murat Yıldız Apr 24 '16 at 20:54

1 Answers1

2

Had the same problem with IE10 and IE11 refresh losing all glyphicons. This was due to https and was fixed by removing cache on the font file. Found the solution here: @font-face EOT not loading over HTTPS

Community
  • 1
  • 1
SatuK
  • 21
  • 5
  • hi Satuk...can you please share the changes you did......i am using spring STS and removed header no-cache....still same issue – Taran Jun 23 '16 at 21:27