为什么显示一个字形而不显示另一个？

Question

我在 this page 上使用 Twitter Bootstrap v.3，我在页脚中有以下标记：

<footer class="footer text-center">
    <span class="contact-point">
        <span class="glyphicon glyphicon-earphone"></span>
        087-2562153 / 01-2876730
    </span>
    <span class="contact-point">
        <a href="mailto:theupstudio@gmail.com">
            <span class="glyphicon glyphicon-envelope"></span>
            theupstudio@gmail.com
        </a>
    </span>
</footer>

这应该显示一个 phone 号码和一个电子邮件地址，每个地址都有一个字形图标。但是，出于某种原因，phone 的图标未正确呈现（而是显示了一个正方形），但电子邮件图标没问题。

为什么一个字形显示正确，而另一个不显示？

Answer 1

我猜 glyphicon 字体文件已损坏。尝试 bootstrap 的新副本或手动将所有 glyphicon 字体包含到您的 css.

Answer 2

找不到字形字体文件：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<footer class="footer text-center">
    <span class="contact-point">
        <span class="glyphicon glyphicon-earphone"></span>
        087-2562153 / 01-2876730
    </span>
    <span class="contact-point">
        <a href="mailto:theupstudio@gmail.com">
            <span class="glyphicon glyphicon-envelope"></span>
            theupstudio@gmail.com
        </a>
    </span>
</footer>

我使用 Bootstrap CDN 对其进行了测试，工作正常。

为什么显示一个字形而不显示另一个？

why is one glyphicon displayed but not the other?

html

css

twitter-bootstrap

glyphicons