Icons appear too small on Bootstrap navbar

Question

How can I make the icons bigger and centered on the navbar?

There are no CSS rules that are associated to the navbar so why don't the icons show up the same as the other elements? I've tried several things but nothing seem to work.

in the following picture notice the icons on the right, they're not aligned with the other elements

Code:

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

You need to apply the same padding/line height as the anchor tags.

https://jsfiddle.net/ashzzx2j/

NB: Will need to extend the window with the preview in it.

Answer 2

You can try fa-2x in class tag, exactly like:

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

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

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

Size of icon varies, by changing "x" from "x" till "5x"

Answer 3

Wrap your icons with anchor tags so that they use the styling of the anchor tags just like the menu items.

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

Also if you want to add additional styles use

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

Answer 4

why don't you wrap the icons in anchor tag

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

and give a try.

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>

If you want to increase the size use

fa fa-instagram fa-2x

or

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

Answer 7

Change the font size of the font awesome icons

.fa{
  font-size: 2em
}