自定义字体未应用于：CSS中的伪元素之前

Question

我对CSS内容值有疑问。它根本不显示，只是代码，如图中所示。谁能解释是什么原因导致的我会尝试修复它，而不在这里发布代码。

HTML：

<a href="#"><i class="icon-map-marker"></i> Atlanta</a>

CSS：

.icon-map-marker:before{
    content: "\f041"
}

@font-face {
    font-family: 'FontAwesome';
    src: url('fontawesome-webfont.eot');
    src: url('fontawesome-webfont.eot') format('embedded-opentype'),
         url('fontawesome-webfont.woff?') format('woff'),
         url('fontawesome-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal
}

[class^="icon-"], [class*=" icon-"] {
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    text-decoration: inherit;
    -webkit-font-smoothing: antialiased;
    display: inline;
    width: auto;
    height: auto;
    line-height: normal;
    vertical-align: baseline;
    background-image: none;
    background-position: 0 0;
    background-repeat: repeat;
    margin-top: 0
}

Answer 1

这是由于未在用于显示字体的字体中定义的字符引起的。而是显示占位符。在Font Awesome中，fa-map-marker character位于该位置。

显然font-family: FontAwesome不用于:before伪元素。要么未设置，字体不可用，要么触发浏览器错误。我假设没有使用其他CSS规则（否则可能会在级联中的某处覆盖）。

font-family: FontAwesome未设置？

:before是“之前”元素的子元素，因此它正确地继承了font-family。除非规则无效，否则父级有font-family: FontAwesome，但情况并非如此。因此问题不在这里，而且必须是字体不可用。

要确保无误，请尝试将:before的规则更改为

.icon-map-marker:before {
    content: "\f041";
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
}

并查看现在该字符是否显示确定。

FontAwesome字体系列不可用？

字体无法下载，损坏或@font-face at-rule无效。

遵守规则对我来说似乎完全有效。我只是想知道，为什么在WOFF路径之后出现问号？我认为这是旧的IE（＆lt; 9）hack之后遗留下来的，但它应该没有坏处。

检查下载正确的字体文件的能力取决于您。您可以通过嗅探网络流量来验证字体是否已加载，例如使用Firebug或LiveHTTPHeaders（但一定要使用你的字体并通过 Ctrl + F5 重新加载跳过缓存。）

我认为您的问题是浏览器错误。您没有指定使用哪个版本的浏览器，因此我不能说更具体的内容。

要始终确定，您可以使用CSS from the CDN。或者按照同一站点上的说明操作以使Font Awesome正常工作。您还可以自己阅读有关bulletproof @font-face的更多信息，但是您需要在要支持的浏览器中了解@font-face的当前实施状态。

使用来自CDN的CSS

快速测试fa-map-marker中的:before

将其插入您的位置栏：

javascript:'<title>Font Awesome test</title><link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/><style>body:before {font-family: FontAwesome; content: "\\f041";}</style>Atlanta'

JavaScript字符串中需要\\而不是\。该字符串是有效的HTML5文档。

旁注

U+F041是来自range reserved for private use的角色。因此，此代码点可能具有不同的different fonts字符。

使用更多的课程而不是二合一课程也许会更好。使用icon和map-marker可以简化您的选择器，并告诉您您的类可能更具语义。使用CSS预处理器可以让你编写更低级的纯粹表示单元的语义类city。

您的HTML标记非常糟糕。它非常倾向于满足您的表达要求，但HTML应该标记与表示无关的结构。你为什么不用<a href="#" class="icon-map-marker">Atlanta</a>？

Answer 2

可能是您浏览器上的缓存问题，请尝试在文件名旁边添加版本号。

@font-face {
font-family: 'FontAwesome';
src: url('fontawesome-webfont.eot?v1');
src: url('fontawesome-webfont.eot?v1') format('embedded-opentype'),
     url('fontawesome-webfont.woff?v1') format('woff'),
     url('fontawesome-webfont.ttf?v1') format('truetype');
font-weight: normal;
font-style: normal

}