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图像不显示在网页

回答

相关问题