字體真棒圖標來作爲框

我想用Twitter Bootstrap和Jquery，Jquery Mobile實現字體真棒。但是我只有方框代替那些圖標。是否有任何兼容性問題。 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>

來源

2014-02-12 Learner

是的。與font-awesome圖標存在兼容性問題。它不受所有瀏覽器的支持。你必須小心使用font-awesome圖標字體。 –

我正在使用谷歌瀏覽器版本18.不是兼容嗎？ – Learner

這是大多數現代瀏覽器的支持。也許發生的事情是你的字體文件不是被加載。檢查網絡/控制選項卡，看看字體文件是否沒有提供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');

來源

2014-02-12 06:10:49 DhruvPathak

我嘗試本地化庫並下載整個包並使用它的css文件。你能指示我將什麼文件包含在html文件中，以使其工作，這在包中是可用的。 – Learner

包中的字體文件夾必須並排放置到您的css文件夾（如果它是fontawesome.css所在的文件夾），或者您必須更改css文件中的路徑。包含獲得豐富支持的唯一文件是css文件。 – meistermeier

@meistermeier謝謝，它現在工作得很好。歡迎使用Font-Awesome的任何其他提示或技巧。我是新來的。 – Learner

發生這種情況時，你有另一種字體替代您的圖標字體。搜索你的CSS，看看是否有另一個font-family:OtherFont!important;。

另有明確指定i.fa標籤（用於由字體，真棒創建字體）到

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

工作對我來說太棒了。

來源

2015-02-12 07:47:11 William

字體真棒圖標來作爲框

回答

相關問題