Instagram font icon showing as a square

Question

My footer in Wordpress has a number of social icons, but Instagram is the only one that fails rendering properly (see attached image):

I have added the following for better font rendering:

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

And this is how the icon is defined in my style.css:

.icon-instagram:before {
  content: "\e604";
}

What is the issue? I am very new to css icons, so I am not sure what the issue can be in this case.

Thank you,

EDIT1:

Font-family is defined as follows in my style.css:

[class^="icon-"], [class*=" icon-"] {
  font-family: 'my-icons';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

It is a propertary icon font library. From svg the glyph unicode=", so it is correct. — panza, Jan 12 '17 at 17:09
Have you set font-family to that one? just compare with the working ones. — Stickers, Jan 12 '17 at 17:19
@Pangloss, thanks for your help - Have a look at my edit in the question, is that what you mean? — panza, Jan 13 '17 at 09:12

score 0 · Accepted Answer · answered Jan 12 '17 at 17:37

You can use another font icon from here.

CSS : <link href="https://file.myfontastic.com/n6vo44Re5QaWo8oCKShBs7/icons.css" rel="stylesheet">

icon : http://www.socicon.com/chart.php

Facebook : class="socicon-facebook" \E041 • #3e5b98 Twitter : class="socicon-twitter" \E040 • #4da7de Instagram : class="socicon-instagram" \E057 • #000000 Youtube : class="socicon-youtube" \E051 • #e02a20

For More Click Here

Instagram font icon showing as a square

1 Answers1