Dónal Dónal - 1 month ago 9
CSS Question

why is one glyphicon displayed but not the other?

I'm using Twitter Bootstrap v.3 on this page and I have the following markup in the page footer:

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


This should show a phone number and an email address with a glyphicon for each. However, for some reason, the icon for the phone is not rendered correctly (a square is shown instead), but the email icon is fine.

What does one glyphicon shown correctly, but the other doesn't?

Answer

The glyphicon font files cannot be found:

enter image description here

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

I tested it using a Bootstrap CDN, works ok.