图标在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

.fa {
  padding-top:15px;
  padding-bottom:15px;
  line-height:20px;
}

您需要应用与锚标签相同的填充/线高。

https://jsfiddle.net/ashzzx2j/

注意：将需要扩展带有预览的窗口。

Answer 2

您可以在class标签中尝试fa-2x，就像这样：

class =“ fa fa-facebook fa-2x”

class =“ fa fa-twitter fa-2x”

class =“ fa fa-instagram fa-2x”

通过将“ x”从“ x”更改为“ 5x”，图标的大小会有所不同

Answer 3

用锚标签包裹图标，以便它们像菜单项一样使用锚标签的样式。

<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}

Answer 4

为什么不将图标包装在锚标记中

<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/>

试一试。

Answer 5

Try any of these classes => fa-lg,fa-2x,fa-3x,fa-4x,fa-5x .

Example :

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

Answer 6

  <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>

如果要增加尺寸，请使用

fa fa-instagram fa-2x

要么

<i class = "fa fa-instagram" style="font-size:20px;"</i>

Answer 7

更改字体真棒图标的字体大小

.fa{
  font-size: 2em
}