网页中未显示Fontasic图片

Irfana 发表于 Dev

尔法纳

这里的初学者。我正在尝试将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。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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。