web-dev-qa-db-fra.com

FontAwesome 5 - Icône multicolore

FontAwesome 5 propose des milliers d'icônes construites avec SVG. De cette façon, il est facile de colorer toute l'icône en utilisant fill. Mais que faire si je veux utiliser plusieurs couleurs? Par exemple, étant donné l'icône Google , je veux le colorier comme ceci:

CSS multi color icon of Google

htmlcssfont-awesomefont-awesome-5
10
Eliya Cohen

En utilisant un dégradé pour la couleur et deux icônes, nous pouvons y parvenir, mais cela reste un moyen hacky et vous devez gérer chaque cas (icône + coloration) spécifiquement:

.fa-google path{
  fill:url(#grad1);
}
.fa-google + .fa-google path{
  fill:url(#grad2);
}
.icon {
  display:inline-block;
  position:relative;
}
.fa-google + .fa-google {
   position:absolute;
   left:0;
   top:0;
   clip-path: polygon(0% 0%,120% 0%,0% 75%);
}
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js" ></script>
<svg style="width:0;height:0;">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="30%" x2="50%" y2="0%">
      <stop offset="50%" stop-color="#34a853" />
      <stop offset="50%" stop-color="#4285f4" />
    </linearGradient>
    <linearGradient id="grad2" x1="0%" y1="30%" x2="50%" y2="0%">
      <stop offset="50%" stop-color="#fbbc05" />
      <stop offset="50%" stop-color="#ea4335" />
    </linearGradient>
  </defs>
</svg>
<div class="icon"> 
<i class="fab fa-google fa-7x"></i>
<i class="fab fa-google fa-7x"></i>
</div>
9
Temani Afif

Il n'y a aucun moyen d'y parvenir avec FontAwesome (ou toute autre police d'icône disponible) sans vous salir les mains - c'est-à-dire en modifiant la police et en créant vos propres HTML et CSS personnalisés en plus des caractères d'icône partiels que vous avez créés.

Créez chaque partie colorée en icône séparément en tant que personnage et empilez-les les unes sur les autres. L'exemple empile deux icônes FA existantes pour montrer la technique:

.stack-icons {
  position: absolute;
}

.stack-icons i[class*=fa-] {
  position: absolute;
  color: orange;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.stack-icons i[class*=fa-]+i[class*=fa-] {
  color: #a00;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<div class="stack-icons">
  <i class="far fa-circle"></i>
  <i class="fas fa-angle-up"></i>
</div>
2
connexo