Changer la couleur de la police Icônes impressionnantes dans Zurb Foundation 6.3 avec css hover

Question

Je veux changer la couleur des cercles dans ma police empilée Les icônes sociales impressionnantes (ie, les icônes sont au-dessus des cercles) sur les pages dans Zurb Foundation 6.3 , en utilisant la propriété hover pour passer d'une couleur grise à une couleur rouge. J'ai recherché différentes solutions mais rien ne fonctionne. (Je comprends que vous ne pouvez pas spécifier la propriété inline-block pour aligner les icônes car cela empêche la propriété hover de fonctionner, donc j'ai utilisé les tags ul et li à la place.)

Est-ce le problème parce que j'utilise Font Awesome en Fondation plutôt qu'en Bootstrap? Je ne trouve aucune documentation à ce sujet; Je suppose que cela fonctionnera avec Foundation. Toute aide serait très appréciée.

Merci, Steve J.

Voici mon code:

CSS:

.social fa-circle { 
color: #808080; 
} 

.social fa-circle:hover { 
color: #990000; 
} 

HTML:

<div class="row"> 
    <div class="small-12 columns social"> 
     <ul> 
      <li> 
       <a href="#" class=""> 
        <span class="fa-stack fa-lg"> 
         <i class="fa fa-circle fa-stack-2x style="color: gray;"></i> 
         <i class="fa fa-facebook fa-fw fa-stack-1x fa-inverse" 
      style="font-size: 1.2rem;" aria-hidden="true"></i> 
        </span> 
       </a> 
      </li> 

      <li> 
       <a href="#"> 
        <span class="fa-stack fa-lg"> 
         <i class="fa fa-circle fa-stack-2x"></i> 
         <i class="fa fa-instagram fa-fw fa-stack-1x fa-inverse" style="font-size: 1.25rem;" aria-hidden="true"></i> 
        </span> 
       </a> 
      </li> 

      <li> 
       <a href="#"> 
        <span class="fa-stack fa-lg"> 
         <i class="fa fa-circle fa-stack-2x" ></i> 
         <i class="fa fa-envelope-o fa-fw fa-stack-1x fa-inverse" style="font-size: 1.2rem;" aria-hidden="true"></i> 
        </span> 
       </a> 
      </li> 
     </ul> 
    </div> 
</div> 

Answer 1

Je pense que le problème est que vous manquez la périodes pour les classes fa. essayer:

.social .fa-circle { 
color: #808080; 
} 

.social .fa-circle:hover { 
color: #990000; 
}