在css內容中使用圖標字體

我正在嘗試使用zurb基礎的字體圖標icon pack，當然，您可以通過內聯方式顯示它們，當然這很簡單;在css內容中使用圖標字體

<i class="fi-alert"></i>

除了當我嘗試使用它作爲CSS內容（這是他們如何顯示它們...）我沒有當我做一些像content: "\f101" CSS類內得到同樣的結果。我只是讓這些方塊顯示出來。

是我將它們包含在外部的唯一區別嗎？通過;

<link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=132456789blahblahblah" rel="stylesheet">

還是什麼？我是不是在我的sass中錯過了一個src ref或者像這樣的事情？我這樣做只是我希望它能夠工作，並在過去與其他人完成，但我沒有從CSS中使用它們的圖標，只顯示與HTML內聯？我知道這將是一些愚蠢的疏忽，所以可能會使用另一雙眼睛。

對不起，踢我的網絡體驗的灰塵，這是一段時間。

2016-02-24 Chris W.

您需要將font-family設置爲與設置content的相同類中的圖標字體。

.icon:after{ 
    font-family: "foundation-icons"; 
    content: "\f101"; 
}

2016-02-24 22:36:36 fl0cke

MF !!!我知道這是愚蠢的我忘了，謝謝阿米戈！ –

要在CSS選擇器一樣，你必須實際安裝字體家庭爲您的網頁，並使用代碼之前宣佈FONT-FAMILY在你的CSS選擇器中使用它們。

2016-02-24 22:37:55

請提供的作品和你不工作的代碼示例。

如果您嘗試通過將內容添加到不屬於圖標包的現有css元素來顯示圖標，則這不起作用。例如，這將不起作用：

HTML: <li class="icon">text </li> 
CSS: .icon:before { content: "\f101"; }}

用「我」的標籤添加圖標：

HTML: <li class="icon"><i class="fi-alert"></i>text </li>

你看你需要檢查，如果字體文件加載正方形每次。有通過圖標使用4種字體的情況下，設定要載入您的服務器上的CSS和手動將它們鏈接：

2016-02-24 22:49:45 vsevolodts

回答