Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

General Discussion

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

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!