font awesome not working in ie9 & ie11 compatibility mode

2
votes

Font Awesome renders perfectly in Chrome, Firefox, Safari, Opera, and Internet Explorer 11 in standard mode. When Compatibility Mode turned "On" on IE9 OR IE11 no icon render.

Here is my HTML Structure on IE9 (Compatibility Mode turned "On"):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=UTF-16" http-equiv="Content-Type" />
<meta content="IE=9; IE=8; IE=7; 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/style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" media="screen" />
<link rel="SHORTCUT ICON" href="images/favicon.ico" />
<script src="js/jquery/jquery-1.7.2.min.js" type="text/javascript"></script>
</head>
<body>
<body>
</html>

So,How can I have Font Awesome icon render in Internet Explorer 9 and 11 with Compatibility Mode?

2
javascriptcssinternet-explorerfont-awesome
Make the X-UA meta tag the first one in the head. – Alex K.
UTF-16? Really? – Pointy
yes UTF-16. Actually the page generate from XSL @ Pointy – Daniel Smith
check this: stackoverflow.com/a/45321517/800031 – Saurabh R S

2 Answers

2
votes

Found the solution. 

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Needs to be placed as the FIRST tag in the <head> in order for it to work.

1
votes

I found the solution. I deleted the version parameter, eg. ?v4.7.0 in every src of the font in the CSS and it is now working in my IE.