Bootstrap 导航栏上的图标太小答案

【问题标题】：Icons appear too small on Bootstrap navbarBootstrap 导航栏上的图标太小
【发布时间】：2017-07-06 15:09:02
【问题描述】：

如何使图标变大并在导航栏上居中？

没有与导航栏关联的 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>

【问题讨论】：

编写自定义 css i.fa{font-size:20px}
将图标包裹在锚标签中

标签： html css twitter-bootstrap navbar

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

https://jsfiddle.net/ashzzx2j/

注意：需要扩展包含预览的窗口。

【讨论】：

【解决方案3】：

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

class= "fa fa-facebook fa-2x"

class= "fa fa-twitter fa-2x"

class= "fa fa-instagram fa-2x"

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

【讨论】：

【解决方案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/>

试一试。

【讨论】：

【解决方案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

【讨论】：

【解决方案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>

【讨论】：

在你的 css 中使用这个 .fa { font-size:30px; }

【解决方案7】：

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

.fa{
  font-size: 2em
}

【讨论】：