font awesome instagram icon invisible

Question

私はinstagramフォント素晴らしいアイコンをnavbarに追加しましたが、それは見えません。他のすべてのソーシャルアイコンが表示されています。

図表ロゴはメニュー項目-303です。

私はすべての情報が以下にあると思っていますが、もしそうでなければ私に知らせてください - これは私の最初の投稿です。

header .navbar-nav li a i { 
 
    font-size: 18px; 
 
} 
 

 
header .nav.navbar-nav > li.menu-item-23 > a, header .nav.navbar-nav > li.menu-item-24 > a, header .nav.navbar-nav > li.menu-item-25 > a { 
 
    padding: 8px 0px 8px 5px; 
 
} 
 

 
header .nav.navbar-nav > li.menu-item-26 > a { 
 
    padding: 8px 15px 8px 12px; 
 
} 
 

 
header .nav.navbar-nav > li.menu-item-303 > a { 
 
    padding: 8px 15px 8px 12px; 
 
}

<ul id="menu-main-menu" class="nav navbar-nav mobile-hidden expandable"><li class="main alt-bg-color mobile-menu-toggle"> 
 
           <button type="button" class="fa fa-cancel"></button> 
 
          </li><li id="menu-item-249" class="menu-left menu-item menu-item-type-custom menu-item-object-custom menu-item-249"><a href="http://hhhhappy.com/new-music/">MUSIC</a></li> 
 
<li id="menu-item-268" class="menu-left menu-item menu-item-type-custom menu-item-object-custom menu-item-268"><a href="http://hhhhappy.com/arts/">ARTS</a></li> 
 
<li id="menu-item-269" class="menu-left menu-item menu-item-type-custom menu-item-object-custom menu-item-269"><a href="http://hhhhappy.com/news/">NEWS</a></li> 
 
<li id="menu-item-270" class="menu-left menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-270"><a href="http://gigs.hhhhappy.com/">GIG GUIDE</a></li> 
 
<li id="menu-item-271" class="menu-left menu-item menu-item-type-custom menu-item-object-custom menu-item-271"><a href="http://store.hhhhappy.com/">MAG</a></li> 
 
<li id="menu-item-26" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-26"><a target="_blank" href="https://www.youtube.com/user/HappyMusicFestival"><i class="fa fa-youtube"></i></a></li> 
 
<li id="menu-item-303" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-303"><a target="_blank" href="https://www.instagram.com/happymagtv/"><i class="fa fa-instagram"></i></a></li> 
 
<li id="menu-item-25" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-25"><a target="_blank" href="https://soundcloud.com/happy"><i class="fa fa-soundclowd"></i></a></li> 
 
<li id="menu-item-24" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24"><a target="_blank" href="https://twitter.com/happymagtv"><i class="fa fa-twitter"></i></a></li> 
 
<li id="menu-item-23" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-23"><a target="_blank" href="https://www.facebook.com/happymagtv"><i class="fa fa-facebook"></i></a></li> 
 
<li id="menu-item-22" class="no-link menu-item menu-item-type-custom menu-item-object-custom menu-item-22"><a href="#">A gig guide from the creators of Happy</a></li> 
 
</ul>

Answer 1

あなたのフォントawesome cssファイルには、fa-instagrammと書かれたクラス名があり、1ではなく2個のMが付きます。 Goが WP-コンテンツ/テーマ/ musicpeople /含ん/ベンダー/ fontawesome/CSS/fontawesome.cssに
1.と

.fa-instagramm:before 

を見つけ、それを変更します。そこにこの問題を解決する方法はいくつかあります

.fa-instagram:before 

2.ちょうどあなたのCSSファイルに以下を追加

.fa-instagram:before { content: '\e987'; } 

解決策2は、テーマを更新しても、フォントの素晴らしいCSSファイルの中に誤植が残っている場合には、より良いかもしれません。これが助けられたら教えてください！

Answer 2

あなたfont awesome CSS fileで見れば、クラス名はfa-instagrammです。

iタグを<i class="fa fa-instagramm"></i>に更新すると正常に動作します。