2

I have used Font Awesome icon in my project. The HTML page generate from XSL Template as follows-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta content="IE=9; IE=EDGE" http-equiv="X-UA-Compatible" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css?ver=T1.0" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css?ver=T1.0" />
<link rel="stylesheet" type="text/css" href="css/style.css?ver=T1.0" />
<link rel="SHORTCUT ICON" href="images/favicon.ico" />
</head>
<body>
</body>

After searching on stackoverflow I added meta tag in head to render document mode to latest available version. Even my base FONT (Lato) also not load and Still Font Awesome icon disappear in my page In IE (IE9 & IE11) compatibility mode.

Please suggest, what I am missing?

regards,

Here is my style.css -

@font-face{
    font-family: 'Lato';
    src: url('../fonts/lato-v11-latin-regular.eot');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: normal;
  src: url('../fonts/lato-v11-latin-regular.eot');
  src:  local('Lato Regular'), local('Lato-Regular'),
        url('../fonts/lato-v11-latin-regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/lato-v11-latin-regular.woff2') format('woff2'),
        url('../fonts/lato-v11-latin-regular.woff') format('woff'),
        url('../fonts/lato-v11-latin-regular.ttf') format('truetype'),
        url('../fonts/lato-v11-latin-regular.svg#Lato') format('svg');
}

In other browser Chrome, FireFox and IE9 & IE11 (Normal Mode) working fine. Another think is - if install font fontawesome-webfont.ttf in sytem through control panel (windows) then its working fine. As suggest some website I have added Font Face twice.

Daniel Smith
  • 1,626
  • 3
  • 29
  • 59

1 Answers1

0

Here you can try to use this code <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> from this article

Update1 Here might be the issue to be referenced.

As suggested by the font awesome members

"This still fails on IE9 when the font doesn't have full "Installable" permissions. Only solution seems to be to edit the font permissions or serve it from the local server."

One more thread which might be able to help

Community
  • 1
  • 1
Pritish Vaidya
  • 21,561
  • 3
  • 58
  • 76
  • what is reason for not loading css and Font Awesome icons? – Daniel Smith Oct 16 '16 at 09:58
  • As per your answer I have added html5shiv.min.js but still not working. I am using aix web server. @ Pritish – Daniel Smith Oct 16 '16 at 10:31
  • as i have updated my answer,the problem might be with the full permissions that ie gives to the font,so you need to edit font permissions as explained in the guthub issues – Pritish Vaidya Oct 16 '16 at 10:37
  • So what about the IE11 compatibility mode? There also not working. One think if i have install font fontawesome-webfont.ttf in my sytem. then its working fine. – Daniel Smith Oct 16 '16 at 10:49
  • I think this might be the open issue so you need to replace and use a cdn for ie11 as https://github.com/FortAwesome/Font-Awesome/issues/7681 – Pritish Vaidya Oct 16 '16 at 10:54
  • here you can aslo try if this is done or not https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting#get-ttfotf-fonts-working-in-ie9,i wa diggin into the issue and it seems that ie cant use fonts outside into the other domain,so if you want to use the same font,use it in the same domain – Pritish Vaidya Oct 16 '16 at 11:22
  • Yes I used in same domain @font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } – Daniel Smith Oct 16 '16 at 11:46
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/125839/discussion-between-sandy-and-pritishvaidya). – Daniel Smith Oct 16 '16 at 14:41
  • any solution to fix? – Daniel Smith Oct 16 '16 at 14:42
  • sorry i dont know any more,whatever i thought would be the issue,i told you but if i get any more update i'll tell you for sure – Pritish Vaidya Oct 16 '16 at 14:48
  • thnks pritish ji :) – Daniel Smith Oct 16 '16 at 14:49