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>

这是我的ID“社交”

的CSS

#lab_social_icon_footer #social-in:hover {

颜色：＃4E433C;

}

Answer 1

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 2

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

Answer 3

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

3 个答案: