html - Bootstrap 导航栏上的图标显得太小

Question

如何让图标变大并居中于导航栏？

没有与导航栏相关联的 CSS 规则，那么为什么图标显示与其他元素不同？我尝试了几件事，但似乎没有任何效果。

在下图中注意右边的图标，它们没有与其他元素对齐

代码:

<header>
  <nav class = "navbar navbar-default navbar-fixed-top">
    <div class = "container">
      <div class = "navbar-header">
        <a class = "navbar-brand" href = "#">
          BRAND
        </a>
      </div>
      <ul class = "nav navbar-nav navbar-right">
        <li class = "text"><a href="#">ABCD</a></li>
        <li class = "text"><a href="#">EFGH</a></li>
        <li class = "text"><a href="#">IJKL</a></li>
        <li class = "text"><a href="#">MNOP</a></li>
        <li><i class = "fa fa-facebook"></i><li/>
        <li><i class = "fa fa-twitter"> </i><li/>
        <li><i class = "fa fa-instagram"> </i><li/>
      </ul>
    </div>
  </nav>
</header>

Answer 1

用 anchor 标签包裹你的图标，这样它们就可以像菜单项一样使用 anchor 标签的样式。

<ul class = "nav navbar-nav navbar-right">
        <li class = "text"><a href="#">ABCD</a></li>
        <li class = "text"><a href="#">EFGH</a></li>
        <li class = "text"><a href="#">IJKL</a></li>
        <li class = "text"><a href="#">MNOP</a></li>
        <li><a href="#"><i class = "fa fa-facebook"></i></a><li/>
        <li><a href="#"><i class = "fa fa-twitter"> </i></a><li/>
        <li><a href="#"><i class = "fa fa-instagram"> </i></a><li/>
      </ul>

此外，如果您想添加其他样式，请使用

.navbar-nav .fa{ //your styles}