这是我的网站: http://sonic3remastered.com/
如果查看底部的以下部分,您会看到一些代码,例如/f0d4
,/f081
等。
这些应该是CSS字体图标,但它们显示为代码而不是图标。
HTML
<ul class="ui-social-media color">
<li class="twitter">
<a target="_blank" href="https://twitter.com/sonic3onmobile"><span>Twitter</span></a>
</li>
<li class="facebook">
<a target="_blank" href="https://www.facebook.com/sonic3onmobile"><span>Facebook</span></a>
</li>
<li class="google-plus">
<a target="_blank" href="https://plus.google.com/103304727452387042300" rel="publisher"><span>Google Plus</span></a>
</li>
</ul>
CSS
.ui-social-media li a:before {
display: block;
font-size: 2em;
color: inherit
}
.ui-social-media li a:hover {
color: #5b5b5b
}
.ui-social-media li a span {
display: none
}
.ui-social-media .facebook a:before {
font-family: 'ui-glyphs';
display: inline-block;
width: 1em;
height: 1em;
content: "/f0d4"
}
.ui-social-media .twitter a:before {
font-family: 'ui-glyphs';
display: inline-block;
width: 1em;
height: 1em;
content: "/f081"
}
.ui-social-media .google-plus a:before {
font-family: 'ui-glyphs';
display: inline-block;
width: 1em;
height: 1em;
content: "/f0d4"
}
我该如何解决这个问题?
我已打开Chrome开发者工具并转到网络&gt;字体。字体似乎正在加载,所以我不确定是什么问题。
答案 0 :(得分:3)
当您需要使用反斜杠/
时,您正在使用正斜杠\
。
改变它,它会修复它。
示例强>
.ui-social-media .google-plus a:before {
font-family: 'ui-glyphs';
display: inline-block;
width: 1em;
height: 1em;
content: "\f0d4" /* Not "/f0d4" */
}