web-dev-qa-db-fra.com

fontawesome 5.x définissant la couleur sur l'icône

Je ne peux pas colorier les icônes font-awesome5 à l'aide de ces codes. J'ai essayé de "remplir" la propriété css pour définir la couleur, mais cela n'a pas fonctionné.

Code HTML:

<div class="container mt200 icons">
  <div class="col-md-3">
    <div class="bggray2 text-center">
      <i class="fas fa-microphone fa-5x"></i>
      <div class="title">LOREM</div>
      <div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="bggray2 text-center">
      <i class="far fa-edit fa-5x"></i>
      <div class="title">LOREM</div>
      <div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
      </div>
    </div>
  </div>
</div>

Code CSS:

.icons i {
  color: #2759AE;
}
cssfont-awesomefont-awesome-5
6
Ed Joe

Font Awesome 5 utilise svg pour les icônes et path à l'intérieur sont configurés avec fill:currentColor donc changez simplement la couleur de svg:

.icons svg {
 color:#2759AE;
}
<script defer src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
<div class="container mt200 icons">
  <div class="col-md-3">
    <div class="bggray2 text-center">
      <i class="fas fa-microphone fa-5x"></i>
      <div class="title">LOREM</div>
      <div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="bggray2 text-center">
      <i class="far fa-edit fa-5x"></i>
      <div class="title">LOREM</div>
      <div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
      </div>
    </div>
  </div>
</div>

Comme vous pouvez le constater dans le code, les i sont remplacées par svg lorsque vous chargez la version de JS:

 enter image description here

Vous pouvez appliquer color à i si vous utilisez la version CSS.

.icons i {
 color:#2759AE;
}
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet"><div class="container mt200 icons">
  <div class="col-md-3">
    <div class="bggray2 text-center">
      <i class="fas fa-microphone fa-5x"></i>
      <div class="title">LOREM</div>
      <div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="bggray2 text-center">
      <i class="far fa-edit fa-5x"></i>
      <div class="title">LOREM</div>
      <div class="text">Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.
      </div>
    </div>
  </div>
</div>

Donc, pour être sûr que cela fonctionnera dans tous les cas, utilisez simplement les deux sélecteurs:

.icons i,.icons svg {
   color: #2759AE;
}
10
Temani Afif

Si vous utilisez la version svg-with-js de Font Awesome 5, tout ce qui se trouve dans le <i></i> est traité dans un <svg>. Il spécifie que le chemin a fill="currentColor" Donc, vous devez définir currentColor à la couleur que vous voulez d'une manière ou d'une autre. Une option est:

svg {color: blue;}

Les documents officiels recommend inline style:

<i class="far fa-edit fa-5x" style="color:blue"></i>

Ou bien, définissez currentColor dans l'un des éléments extérieurs. Par exemple:

<div class="bggray2 text-center" style="color: blue;">
  <i class="far fa-edit fa-5x"></i>
</div>

Et pour le déplacer dans le fichier CSS, vous pouvez:

div .bggray2 {
    color: blue;
}
1
duncandoo