Fontasic圖像不顯示在網頁

初學者在這裏。我正在嘗試將Fontastic用於網站。這裏是我如何使用它：Fontasic圖像不顯示在網頁

<html> 
<head> 
    <link href="https://fontastic.s3.amazonaws.com/3BksDdMDDYiXnZWaHMVHCd/icons.css" rel="stylesheet"> 
</head> 
<body> 
    <h1> 
     <i class="icon-code">a</i> My Title 
    </h1> 
</body> 
</html>

如何過，結果我得到的似乎是這樣的：

艾米標題

雖然它應該表現出一個微小的圖像。我很欣賞任何評論，建議和代碼示例。

來源

2014-12-07 Irfana

看看你的CSS文件的內容。引用的唯一圖標是.icon-alignment-aligned-to和icon-briefcase。 icon-code不存在。

icons.css

@charset "UTF-8"; 

/* untitled-font-1 */ 
@font-face { 
    font-family: "untitled-font-1"; 
    src:url("https://fontastic.s3.amazonaws.com/3BksDdMDDYiXnZWaHMVHCd/fonts/1417862732.eot"); 
    src:url("https://fontastic.s3.amazonaws.com/3BksDdMDDYiXnZWaHMVHCd/fonts/1417862732.eot?#iefix") format("embedded-opentype"), 
    url("https://fontastic.s3.amazonaws.com/3BksDdMDDYiXnZWaHMVHCd/fonts/1417862732.woff") format("woff"), 
    url("https://fontastic.s3.amazonaws.com/3BksDdMDDYiXnZWaHMVHCd/fonts/1417862732.ttf") format("truetype"), 
    url("https://fontastic.s3.amazonaws.com/3BksDdMDDYiXnZWaHMVHCd/fonts/1417862732.svg#1417862732") format("svg"); 
    font-weight: normal; 
    font-style: normal; 
} 

[data-icon]:before { 
    font-family: "untitled-font-1" !important; 
    content: attr(data-icon); 
    font-style: normal !important; 
    font-weight: normal !important; 
    font-variant: normal !important; 
    text-transform: none !important; 
    speak: none; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 

[class^="icon-"]:before, 
[class*=" icon-"]:before { 
    font-family: "untitled-font-1" !important; 
    font-style: normal !important; 
    font-weight: normal !important; 
    font-variant: normal !important; 
    text-transform: none !important; 
    speak: none; 
    line-height: 1; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 

.icon-alignment-aligned-to:before { 
    content: "a"; 
} 
.icon-briefcase:before { 
    content: "b"; 
}

<link href="https://fontastic.s3.amazonaws.com/3BksDdMDDYiXnZWaHMVHCd/icons.css" rel="stylesheet"/> 
 

 
<h1> 
 
     <i class="icon-briefcase"></i> My Title 
 
    </h1> 
 
<h1> 
 
     <i class="icon-alignment-aligned-to"></i> My Title 
 
    </h1>

來源

2014-12-07 13:26:56 Turnip

謝謝，我可以問我怎麼可以在我的類（特定圖像）添加到css文件？因爲CSS是由Fontastic網站生成的。謝謝。 – Irfana 2014-12-07 13:35:17

它應該爲您生成CSS，具體取決於您爲字體選擇的字形。您的字體文件中很可能缺少'code'圖標。嘗試在Fontastic上重新創建字體 – Turnip 2014-12-07 13:38:59

現在已經解決了，我重新生成了css文件並且包含了類。非常感謝你：） – Irfana 2014-12-07 14:15:29

Fontasic圖像不顯示在網頁

回答

相關問題