なぜfa faagram 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が "社会における"

#lab_social_icon_footer #social-in:hover { 

色：＃1 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の正方形を持っていません。図表アイコンが正方形であるため、不要です。正方形を取り除くだけで動作します。