Font Awesome Styling

Question

J'essaie de styler quatre icônes Font Awesome, mais il apparaît quand je les amène en dessous de 10px en hauteur et en largeur, l'état de hover est foiré.

L'objectif est de les faire apparaître en blanc et avoir un effet de survol qui change l'icône en rouge avec un fond blanc. Pensées?

Si cela aide, je mets ceci dans un nav de bootstrap. De plus, si vous êtes à l'aise avec le nouveau Bootstrap, je n'arrive pas à superposer la barre de navigation au-dessus d'un carrousel Bootstrap au lieu de pousser le Carrousel vers le bas.

CSS

#socialnav .fa { 
font-size: 1em; 
color: #ffffff; 
width:10px; 
height:10px; 
text-align:center; 
padding: 5px; 
transition:all 0.4s ease-in-out; 
} 

#socialnav .fa:hover { 
color: #c9001f; 
background-color: #ffffff; 
} 

HTML

<section id="socialnav"> 
    <nav class="navbar navbar-toggleable-sm navbar-inverse"> 
     <div class="navbar-collapse collapse" id="navigation"> 
      <ul class="nav navbar-nav ml-auto w-100 justify-content-end"> 
       <li class="nav-item"> 
        <a class="nav-link" href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#"><i class="fa fa-youtube" aria-hidden="true"></i></a> 
       </li> 
      </ul> 
     </div> 
    </nav> 
</section> 

Answer 1

hauteur Set et largeur relative, vous ne voulez pas définir une hauteur statique et la largeur de l'icône ou bien l'arrière-plan sera exactement de 10 pixels en hauteur et en largeur. Regarde mes codepen pour un exemple de travail: https://codepen.io/anon/pen/QgPboZ?editors=1111

#socialnav .fa { 
 
\t font-size: 1em; 
 
\t color: #ffffff; 
 
\t width: relative; 
 
\t height: relative; 
 
\t text-align: center; 
 
\t padding: 5px; 
 
\t transition: all 0.4s ease-in-out; 
 
} 
 

 
#socialnav .fa:hover { 
 
\t color: #c9001f; 
 
\t background-color: #ffffff; 
 
}

<section id="socialnav"> 
 
<nav class="navbar navbar-toggleable-sm navbar-inverse"> 
 
    <div class="navbar-collapse collapse" id="navigation"> 
 
    <ul class="nav navbar-nav ml-auto w-100 justify-content-end"> 
 
    <li class="nav-item"> 
 
    <a class="nav-link" href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a> 
 
    </li> 
 
    <li class="nav-item"> 
 
    <a class="nav-link" href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a> 
 
    </li> 
 
    <li class="nav-item"> 
 
    <a class="nav-link" href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a> 
 
    </li> 
 
    <li class="nav-item"> 
 
    <a class="nav-link" href="#"><i class="fa fa-youtube" aria-hidden="true"></i></a> 
 
    </li> 
 
    </ul> 
 
    </div> 
 
</nav> 
 
</section>