CODEWITHSUNDEEP
htmlcssfont-awesome
pixelite
pixelite

Reputation: 57

Font Awesome icons not showing up (no error in console)

I know there are many questions addressing this but none worked for me:

The font path is also correct and not missing when checked using firebug.

I tried using an external link to call font-awesome css however that did not work:

Font Awesome icons disappear after refresh of browser

Here I understood that there is a problem in chrome at times however it is also not working on mozilla:

Font Awesome icons disappear after refresh in Chrome

Following is the temp link to my template:

http://pixelcreations.in/finepix/

My Code:

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

        <!--<link rel="stylesheet" type="text/css" href="css/index.css" />-->

        <link href="css/style.css" rel="stylesheet" />

        <!-- for the Skeleton -->
        <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="css/skeleton.css" type="text/css" media="screen" />

        <!--font awesome-->
        <link rel"stylesheet" href="css/font-awesome/font-awesome.min.css" type="text/css" media="screen" />


    </head>
    <body>
        <div class="app">
            <div class="container">
              <div class="row">
                <div class="twelve column" style="background-color: #000;height:50px; color:white; padding:15px;">
                    <div class="u-pull-left">
                        <a href="">

                        </a>
                    </div>
                    <div class="u-pull-right" style="padding-left:9px; cursor: pointer;">
                         <a href="">
                            <i class="fa fa-ellipsis-v"></i>
                        </a>
                    </div>
                    <div class="u-pull-right" style="padding-left:9px; cursor: pointer;">
                        <a href="">
                            <i class="fa fa-shopping-cart"></i>
                        </a>
                    </div>
                    <div class="u-pull-right" style="padding-left:9px; cursor: pointer;">
                         <a href="">
                            <i class="fa fa-bell "></i>
                        </a>
                    </div>
                </div>
              </div>
            </div>

            <div class="container">
              <div class="row">
                <div class="twelve column" style="background-color: #ffffff; color: #aaaaaa; width: 100%; min-height: 500px; height: auto;">

                </div>
              </div>
            </div>

        </div>
        <!--<script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>-->
        <script src="lib/jquery-1.11.2.min.js"></script>
    </body>
</html>

Upvotes: 1

Views: 2543

Answers (1)

Jakub Matczak
Jakub Matczak

Reputation: 15656

CSS file is not being loaded because you have = char missing in line:

<link rel"stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" media="screen" />

Change it to 

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" media="screen" />

I've verified that in firebug and it works.

Upvotes: 4

Related Questions