圖標在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
}