Twitter Bootstrap - 使用圖標

我正在使用Twitter Bootstrap並顯示圖標時出現問題。我試圖重新這裏的一個例子：http://fortawesome.github.io/Font-Awesome/#examples Twitter Bootstrap - 使用圖標

這裏是我的代碼：

<head> 
    <meta charset="utf-8"/>  
    <script type="text/javascript" src="assets/js/jquery-1.9.1.min.js"></script> 
    <script type="text/javascript" src="assets/js/bootstrap.min.js"></script> 
    <link rel="stylesheet" href="assets/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="assets/css/font-awesome.min.css"> 
</head> 
<div class="control-group"> 
    <p><i class="icon-camera-retro icon-large"></i> icon-camera-retro</p> 
    <p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p> 
    <p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p> 
    <p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p> 
</div>

的圖標不顯示在所有;我需要鏈接到任何圖標圖像文件或類似的東西？我在Firefox中測試，但Font-Awesome示例站點確實加載正確，所以我非常確定瀏覽器選擇不是問題。任何幫助，將不勝感激！

來源

2013-04-22 nsax91

確保font-awesome.min.css中字體文件的路徑對於您的設置是正確的。 – Hoshts 2013-04-22 21:36:05

您是否更改過字體文件夾路徑？如果你這樣做，你應該更新字體的CSS文件 – 2013-04-22 21:36:18

除非有一個特定的原因，你使用相對URL爲您的文件堅持「絕對」 - 這樣，他們總是會發現無論你打電話給他們，例如：'/資產/ CSS/bootstrap.min.css' – nickhar 2013-04-22 22:45:00

您是否安裝了Firebug？你應該檢查網絡標籤中的404錯誤，從你的描述我猜你沒有把字體文件放在你的服務器上的正確位置。

如果你看看font-awesome.css一日幾行，你會看到如下的定義：

@font-face { 
    font-family: 'FontAwesome'; 
    src: url('../font/fontawesome-webfont.eot?v=3.0.1'); 
    src: url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded- opentype'), 
     url('../font/fontawesome-webfont.woff?v=3.0.1') format('woff'), 
     url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
}

確保在CSS（which you can find here）引用的文件下載到您的服務器，並將其下資產/字體。

來源

2013-04-22 22:38:21

確保將Font Awesome「font」文件夾複製到「assets」文件夾中。

字體真棒將覆蓋使用 Twitter的引導「圖標」 ../img/glyphicons-halflings.png

[class^="icon-"], [class*=" icon-"] { 
    font-family: FontAwesome; 
    font-weight: normal; 
    font-style: normal; 
    text-decoration: inherit; 
    -webkit-font-smoothing: antialiased; 
    display: inline; 
    width: auto; 
    height: auto; 
    line-height: normal; 
    vertical-align: baseline; 
    background-image: none; 
    background-position: 0% 0%; 
    background-repeat: repeat; 
    margin-top: 0; 
}

這將需要的字體文件來呈現網頁上的圖標;）

來源

2013-04-23 04:50:41

Twitter Bootstrap - 使用圖標

回答

相關問題