Question

我知道解决这个问题有很多问题，但没有一个问题适合我：

使用firebug检查时，字体路径也正确且不会丢失。

我尝试使用外部链接调用font-awesome css，但这不起作用：

Font Awesome icons disappear after refresh of browser

在这里我理解chrome有时会出现问题，但是它也无法在mozilla上运行：

Font Awesome icons disappear after refresh in Chrome

以下是我模板的临时链接：

http://pixelcreations.in/finepix/

我的代码：

    <!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>

Answer 1

未加载CSS文件，因为行中缺少=个字符：

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

将其更改为

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

我已经在萤火虫中验证了它的确有效。

Font Awesome图标未显示（控制台中没有错误）

1 个答案: