初学者。我正在尝试将 Fontastic 用于网站。以下是我的使用方法:
<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>
我得到的结果是这样的:
我的标题
虽然它应该显示一个小图像。感谢任何评论、建议和代码示例。
最佳答案
查看您的 css 文件的内容。唯一引用的图标是 .icon-alignment-aligned-to 和 icon-briefcase。 图标代码不存在。
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>关于html - Fontasic 图像未显示在网页中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27343049/