发表新帖
发表新帖

Font Awesome fonts show up as boxes on IE8

后端 未结
关注
10 1667
[愿得一人]
[愿得一人] 2020-12-05 05:01

So I am using Font Awesome in a project and in testing I\'m running into issues with IE8.

On Windows IE9, Chrome and Firefox show the font properly (As does Firefox,

相关标签:
10条回答
  • 自闭症患者
    2020-12-05 05:44

    Try adding this to your head before including CSS:

    <!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
    0 讨论(0)
  • 一个人的身影
    2020-12-05 05:51

    It turns out that there was an extra <html> tag being generated by an included file that was the source of my problems. So, in my final file I had both <html lang="en"> AND <html> The extra <html> tag was throwing IE into quirks mode which cause the font-awesome icon issue I was having.

    Eliminating that rogue <html> and verifying my headers were set correctly fixed everything for me.

    I am now using a boilerplate set of header tags on all pages:

    <!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>    
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <meta charset="utf-8" />

    Before I had this on one page:

    <!DOCTYPE html>
<html lang="en">
<html>  <!-- This tag was causing the problem, removing it solved things for me -->
<head>    
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <meta charset="utf-8" />
    0 讨论(0)
  • 佛祖请我去吃肉
    2020-12-05 05:52

    It is not only IE, all the browsers have the same issue.

    The funny thing is you need to put your files in the right location.

    This means you need the below structure:

    folder levels look like this:

    level 1                 level 2  level 3

----index.html 

----font-awesome-4.2.0  ----css ---- fontawesome.css

                        ----css ---- fontawesome.min.css 

                        ----fonts----... 

                                 ----... 

                        ----...

    and then put the link sylte in your index.html as

    <link rel="stylesheet" href="./font-awesome.min.css"> in between head

    a very important note is: DO NOT try to COMBINE fontawesome folder and any other folder. Keep them separate.

    now test it, and everything is good to go.

    0 讨论(0)
  • 刺人心
    2020-12-05 05:53

    This appears to be a really common issue and according to this discussion has to do with the character being attached using :before. I actually found the easiest way to get it working in IE 8 is to not use the fa-name class and insert the character manually.

    e.g. Instead of:

    <i class="fa fa-user fa-lg"></i>

    use:

    <i class="fa fa-lg">&#xf007;</i>

    The character codes can be found on the Font Awesome Cheatsheet. This seems to work all the time, no matter what IE version.

    Hope this helps someone,

    Jason

    0 讨论(0)
 看不清?
提交回复
热议问题