字體真棒instagram圖標隱形

我已經將Instagram字體真棒圖標添加到導航欄，但它的隱形 - 所有其他社交圖標都顯示。字體真棒instagram圖標隱形

instagram標誌是menu-item-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>

來源

2017-02-06 Sam

抱歉不確定如何編輯 - 網站是：gigs.hhhhappy.com – Sam

所以，你的字體真棒css文件有類名寫fa-instagramm，用2個M而不是1個。有幾種方法來解決這個問題：
1.轉到的wp-content /主題/ musicpeople /包括/供應商/ fontawesome/CSS/fontawesome.css並找到

.fa-instagramm:before

，並更改爲

.fa-instagram:before

2.只需添加到您的css文件

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

解決方案2在更新主題的情況下可能會更好，並且它在字體真棒css文件中仍存在拼寫錯誤。讓我知道這是否有幫助！

來源

2017-02-06 02:43:18

您好，歡迎來到SO。感謝您試圖提供幫助，但我想建議修改fontAwesome的標準CSS僅用於修正拼寫錯誤（由Michael Coker標識）是一個糟糕的主意。如果用戶升級到FA的新版本，用戶可能會冒險兼容... – MBaas

@Mbaas嗯，我想你錯了，看看這裏https://github.com/FortAwesome/Font-Awesome/blob/master /css/font-awesome.css#L1218-L1220。在我看來，錯字是在用戶（或者說是WP主題）的FA CSS文件中。這就是爲什麼我建議寧願編輯他使用的css文件而不是FA文件，因爲他可以升級他的主題，如果主題作者沒有抓住它，錯字就會回來。或者我錯過了什麼？ –

哦，你是對的！我使用WP很長一段時間，所以我沒有意識到這個錯字來自已經修改了'fontawesome.css'的主題。這感覺很糟糕 - 但也許是有原因的......在這種情況下，你的解決方案肯定是適用的 - 但是，如果一個人做了這樣的事情 - 他希望有一個很好的理由，編輯會產生問題，太。所以我認爲邁克爾科克的解決方案「感覺」更好，因爲它侵入性更小，隻影響用戶代碼... – MBaas

如果您在font awesome CSS file看，類名是fa-instagramm。

更新您的i標記爲<i class="fa fa-instagramm"></i>，它應該工作。

來源

2017-02-06 02:40:30

字體真棒instagram圖標隱形

回答

相關問題