Les icônes apparaissent trop petites sur la barre de navigation Bootstrap

Question

Comment agrandir les icônes et les centrer sur la barre de navigation?

Il n'y a pas de règles CSS associées à la barre de navigation, alors pourquoi les icônes n'apparaissent-elles pas de la même façon que les autres éléments? J'ai essayé plusieurs choses mais rien ne semble fonctionner.

dans l'image suivant l'avis des icônes sur la droite, ils ne sont pas alignés avec les autres éléments

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

Enveloppez vos icônes avec des balises d'ancrage afin qu'ils utilisent le style de l'ancre les balises tout comme les éléments du menu.

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

Aussi, si vous voulez ajouter des styles supplémentaires utilisent

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

Answer 2

Modifier la taille de la police de la police impressionnante icônes

.fa{ 
    font-size: 2em 
} 

Answer 3

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

Vous devez appliquer la même hauteur de remplissage/ligne que les étiquettes d'ancrage.

https://jsfiddle.net/ashzzx2j/

NB: devez étendre la fenêtre avec l'aperçu en elle.

Answer 4

Vous pouvez fa-2x dans la balise de classe, comme exactement:

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

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

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

Taille de l'icône varie, en changeant "x" de "x" jusqu'à "5x"

Answer 5

pourquoi ne pas envelopper les icônes dans la balise d'ancrage

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

et essayer.

Answer 6

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 7

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

Si vous souhaitez augmenter l'utilisation de la taille

fa fa-instagram fa-2x 

ou

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