Question

我正在尝试使用Twitter Bootstrap和Jquery，Jquery Mobile实现Font-Awesome。但我只得到方框来取代那些图标。是否有任何兼容性问题。 Follwing是html代码。对此有任何帮助。谢谢

 <html>
    <head>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/font-awesome.min.css">   
    <!--     <link rel="stylesheet" href="http://www.bootstrapcdn.com/?v=01042013155511#tab_fontawesome">-->
    </head>
    <body>
    <p><i class="fa fa-camera-retro fa-lg"></i> fa-camera-retro</p>
    <div class="container fullContainer" >
    <div class="row port-container">
    <div class="col-xs-12">
    <nav class="navbar" style="opacity: 1; top: 0px; ">
    <ul class="list-unstyled">
    <li class="menu-li bg-green box2x2 pull-left"><a href="#" id="resumelink"><span>About Us</span><i class="i-centered icon-attach-1"></i></a></li>
     <li class="menu-li bg-orange box2x2 pull-right"><a href="#" id="worklink"><span>Search</span><i class="i-centered icon-art-gallery"></i></a></li>
      <li class="menu-li bg-purple box2x2 pull-left"><a href="#" id="resumelink"><span>Whats New</span><i class="i-centered icon-attach-1"></i></a></li>
      <li class="menu-li bg-white box2x2 pull-right"><a href="#" id="worklink"><span>Brouchers</span><i class="i-centered icon-art-gallery"></i></a></li>
      <li class="menu-li bg-red box2x2 pull-left"><a href="#" id="lifelink"><span>Favourites</span><i class="i-centered icon-pitch"></i></a></li>
      <li class="menu-li bg-blue box2x2 pull-right"><a href="#" id="contactlink"><span>Contact Us</span><i class="i-centered icon-email"></i></a></li>
    </ul>
    </nav>
      </div>
    </div>
    </div>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script src="../js/jquery.mobile-1.2.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    </body>
    </html>

Answer 1

大多数现代浏览器都支持它。也许正在发生的是你的字体文件不是加载。检查网络/控制选项卡，查看字体文件是否没有出现404错误。

这些是字体路径：

 font-family: 'FontAwesome';
  src: url('../font/fontawesome-webfont.eot?v=4.0.3');
  src: url('../font/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('../font/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('../font/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');

Answer 2

如果您有其他字体覆盖图标字体，则会发生这种情况。搜索您的CSS以查看是否还有其他font-family:OtherFont!important;。

否则明确指定您的i.fa标签（Font-awesome使用它来创建字体）

i.fa{ 
    font-family:FontAwesome!important; 
}

对我来说很棒。

作为框的字体 - 令人敬畏的图标

2 个答案: