CSS 字体不工作 - 字体图标显示为代码

Question

如果您查看底部的后续部分，您会看到一些代码，例如 /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 开发者工具并转到网络 > 字体。字体似乎正在加载，所以我不确定是什么问题。

Answer 1

您正在使用正斜杠 /，而您需要使用反斜杠 \。

改变它，它会修复它。

例子

.ui-social-media .google-plus a:before {
    font-family: 'ui-glyphs';
    display: inline-block;
    width: 1em;
    height: 1em;
    content: "\f0d4" /* Not "/f0d4" */
}

CSS 字体不工作 - 字体图标显示为代码

CSS Fonts not working - Font icons displaying as codes

html

css

fonts