CODEWITHSUNDEEP
csswebfonts
kanga
kanga

Reputation: 379

icon font not rendering on Windows Chrome

I made social media share buttons that use the Entypo Social icon font, inserted as "content:" in the CSS.

Works fine on Chrome, Safari, and Firefox on OSX, and even IE on Windows, but not on Chrome for Windows.

On Windows Chrome, the icon simply does not appear (no rectangle symbol or anything). If I change the font to something else, it will show the rectangle missing-glyph symbol, but using Entypo as the first in the font-family will just show nothing. Also, if I type "blah" into the "content:" instead of the glyph code that will show up as well.

How do I get the icon to appear?

Example

HTML:

<a target="_blank" class="button" href="https://twitter.com/intent/tweet?text=<?php the_title(); ?>&url=<?php the_permalink(); ?>&via=batchbook" title="Share This on Twitter">
<span class="icon icon-twitter" aria-hidden="true"></span>
<span class="text">Tweet</span>
</a>

CSS:

@font-face {
font-family: "Entypo Social";
src: url('../icons/entypo/entypo-social.eot');
src: url('../icons/entypo/entypo-social.eot?#iefix') format('embedded-opentype'),
     url('../icons/entypo/entypo-social.woff') format('woff'),
     url('../icons/entypo/entypo-social.ttf') format('truetype'),
     url('../icons/entypo/entypo-social.svg#entypo') format('svg');
}

a {
    width: 44px;
    float: left;
    margin-right: 12px;
}
.text {
    visibility: hidden;
}
.icon {
    font-family: "Entypo Social";
    font-size: 1.75em;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-twitter:before { content: "\F309"; }

@media only screen and (min-width: 481px) {
    .button {
    padding: 0.25em 0.5em;
    width: auto;
    float: left;
    .text {
        visibility: visible;
    }
}
}

@media only screen and (min-width: 768px) {
    .button {
    padding: 0.25em 1em;
}
.icon {
    margin-right: 0.5em;
}
}

Upvotes: 0

Views: 1846

Answers (1)

Nikita 웃
Nikita 웃

Reputation: 2060

Unfortunately this is a known bug with the "Entypo-Social" font and Chrome/Chromium that has not been fixed yet. Source: https://github.com/danielbruce/entypo/issues/10

You may use Fontello: http://www.fontello.com/

Upvotes: 2

Related Questions