Search code examples
htmlcsstwitter-bootstrapglyphicons

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:[email protected]">
            <span class="glyphicon glyphicon-envelope"></span>
            [email protected]
        </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?

Solution

  • 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:[email protected]">
            <span class="glyphicon glyphicon-envelope"></span>
            [email protected]
        </a>
    </span>
</footer>

    I tested it using a Bootstrap CDN, works ok.