为什么 fa fa instagram 3x 不起作用？

Question

我已经创建了一些社交按钮。除 Instagram 外，所有按钮均显示。我不知道为什么它不起作用。这是我的代码

<div class="text-center center-block">
                <a href="https://www.facebook.com/shahin.albd"><i id="social-fb" class="fa fa-facebook-square fa-3x social"></i></a>

                <a href="https://instagram.com"><i id="social-in" class="fa fa-instagram-square fa-3x social"></i></a>

                <a href="https://twitter.com"><i id="social-tw" class="fa fa-twitter-square fa-3x social"></i></a>                
            </div>

这是我的 CSS id "social-in"

#lab_social_icon_footer #social-in:hover {

颜色：#4E433C；

}

Answer 1

使用<i id="social-in" class="fa fa-instagram fa-3x social" aria-hidden="true"></i>。默认情况下会应用您在后台寻找的方形功能。检查输出。

#social-in:hover {
  color: #4E433C;
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="text-center center-block">
  <a href="https://www.facebook.com/shahin.albd"><i id="social-fb" class="fa fa-facebook-square fa-3x social"></i></a>

  <a href="https://instagram.com"><i id="social-in" class="fa fa-instagram fa-3x social" aria-hidden="true"></i></a>

  <a href="https://twitter.com"><i id="social-tw" class="fa fa-twitter-square fa-3x social"></i></a>
</div>

Answer 2

FontAwesome 没有 fa-instagram-square 图标。他们只有 fa-instagram 可用。

但是，您可以将此图标与方形图标堆叠在一起，如下所示：

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<span class="fa-stack fa-3x">
    <i class="fa fa-square fa-stack-2x"></i>
    <i class="fa fa-instagram fa-stack-1x" style="color: white;"></i>
</span>

Answer 3

FontAwesome 没有 instagram-square。没有必要，因为 Instagram 图标是方形的。只需删除正方形即可。

为什么 fa fa instagram 3x 不起作用？

Why fa fa instagram 3x doesn't isn't working?

css

hover

instagram