css - :before pseudoelement in 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 正确。 parent 有font-family: FontAwesome除非规则无效，事实并非如此。所以问题不在这里，一定是字体不可用。

为了绝对确定，请尝试更改 :before 的规则到

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

然后看看现在 Angular 色是否显示 OK。

FontAwesome字体系列不可用？

字体无法下载、损坏或 @font-face 规则无效。

at 规则对我来说似乎完全有效。我只是想知道，为什么 WOFF 路径后面有问号？我认为这是旧 IE (< 9) hack 之后的遗留问题，但它应该没有害处。

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

我认为您的问题是浏览器错误。你没有具体说明你使用的是什么浏览器和什么版本，所以我不能说更具体的。

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

快速测试fa-map-marker在:before使用来自 CDN 的 CSS

将此插入您的地址栏:

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> ？