Instagram显示作为正方形的字体图标

Question

我在Wordpress中的页脚有很多社交图标，但Instagram是唯一一个无法正确渲染的页面（参见附图）：

为了更好的字体渲染，我添加了以下内容：

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

这就是我在style.css中定义图标的方式：

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

问题是什么？我对css图标很新，所以我不确定在这种情况下会出现什么问题。

谢谢，

EDIT1：

Font-family在我的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;
}

Answer 1

您可以使用here中的其他字体图标。

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

图标：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

更多点击Here