自定义字体不适用于：在伪元素在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; 
} 

，看看现在的字符显示OK。

FontAwesome font family无法使用？

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

规则似乎对我完全有效。我只是想知道，为什么WOFF路径后的问号？我认为这是旧IE浏览器（<9）之后的遗留问题，但它应该不会造成任何伤害。

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

我认为你的问题是一个浏览器错误。你没有指定使用哪个版本的浏览器，所以我不能说更具体的东西。您可以使用CSS from the CDN。或者按照同一网站上的说明操作即可使用Font Awesome。您也可以自己阅读bulletproof @font-face的更多信息，但是您需要在您想要支持的浏览器中跟上@font-face的当前实施状态。的fa-map-marker在:before使用CSS从CDN

快速测试插入此为您的位置吧：

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 

}