Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Posted by Severin Haselmann
Severin Haselmann
24,517 Points

Fontawesome not working in windows 7.5 and android 2.2

I have created a site using H5BP bootstrap and fontawesome as icons. Everything works fine until i tested my site on old browsers using browerstack to check android 2.2 and an old windows phone version 7.5. I found out my icons are showing square like shapes instead of the actual icons.. I have searched endlessly across the web to find a solution with a certain fallback without any success. I can show any png of course but the problem that I'm having is to show the png only when it detects the browser people are using either a windows 7.5 or an android2.2.. First i tried using modernizr wherein I tried hiding the img and make it appear only when the browser doesnt support svg (i assume that fontawesome is using svg) so i wrote this javascript:

 if (!Modernizr.svg) {
         // Doesn't support SVG (Fallback) 
            $("fa fasearch").css("display","none");
            $("ikon").css("display","block");

        }

and it doesnt work ...So I tried a different approach. I wrote in the tag like this instead : 

             <form class="navbar-form navbar-right" role="search">
                 <div class="form-group">
                      <input type="text" class="form-control sokform" placeholder="Sök">
                 </div>
                 <div type="submit" class="sokbtn">
                   <span class="sokikon">
      <!--[if lt IE]> <img class="ikon"src="img/search.png"><![endif]-->
                    <i class="fa fa-search"></i>
                   </span>
                 </div>
              </form>

I wrapped the tag img to run if lt IE is running to show the img.I kinda got it to work but it also shows the (lt IE) tag ! Basically Im trying to hide the fontawesome icon when it doesnt work and show the png but i cant seem to find a javascript to detect a certain version and execute a specific css...Anyone know how to fix this problem?

1 Answer

Severin Haselmann
Severin Haselmann
24,517 Points
Severin Haselmann
Severin Haselmann
24,517 Points

I found a solution to my own problem lol. I realized that windows 7.5 is using explorer 9 so it hit me, I should be using (if lt EI 10)tag instead and it works! Using http://fa2png.io/ to convert my fontawesome to png, I placed them beside my fontawesome icons as img: 

      <form class="navbar-form navbar-right" role="search">
                 <div class="form-group">
                      <input type="text" class="form-control sokform" placeholder="Sök">
                 </div>
                 <div type="submit" class="sokbtn">
                   <span class="sokikon">

                    <i class="fa fa-search"></i>
                    <!--[if lt IE 10]><img class="ikon"src="img/search.png"><![endif]-->
                   </span>
                 </div>
              </form>

then I wrote a special css class "ikon" to cover the squared fontawesome only when its explorer 9 or older :

     .ikon{
      height: 34px;
      width: 34px;
      margin-top: -8px;
      margin-left: -25px;
      z-index: 2;
      position: absolute;   
      }

and voilà! my site looks awesome again. Android in the other hand, I think I can write a special javascript for it work.Besides only 0.7% people are using android 2.2 so I dont think I have to worry so much about it.. Hope this helps others out there!