css - Font Awesome instagram 图标不可见

标签 css twitter-bootstrap font-awesome

我已将 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>

最佳答案

如果您查看 font awesome CSS file , 类名是 fa-instagramm .

更新您的 i标记为 <i class="fa fa-instagramm"></i>它应该有效。

关于css - Font Awesome instagram 图标不可见,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42059552/

相关文章:

javascript - 在 index.html 中使用 require.js 时,我无法从 ace.min.js 获取事件

jquery - 使用 Bootstrap 4 在选择选项中搜索功能

css - 到处使用 col-xs-* 是个好习惯吗?

css - bootstrap 和 font-awesome 之间的图标冲突

ruby-on-rails - Rails link_to with font-awesome 和外部 url

css - Font Awesome 图标不调整大小

html - CSS 悬停一个 div 和其他 div 也悬停

javascript - 使用 atan2() 向鼠标方向旋转一个 div

html - CSS .not(selector) 不适用于 span 标签

javascript - 找出元素或其任何祖先元素是否显示 : none 的高效方法