FontAwesome 5 - многоцветная иконка

Question

FontAwesome 5 предлагает тысячи иконок, созданных с помощью SVG. Таким образом, можно легко раскрасить весь значок с помощью заливки. Но что, если я хочу использовать несколько цветов? Например, учитывая значок Google, я хочу его раскрасить так:

_{Свободный перевод вопроса FontAwesome 5 - Multi color icon от участника @Eliya Cohen.}

Answer 1

Используя градиент для цвета и две иконки, мы можем добиться этого, но это остается хакерским способом, и вам нужно обрабатывать каждый случай (значок + окраска) специально:

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

Мы также можем рассмотреть использование conic-gradient() с одним значком. Опять же, это характерно для этого конкретного случая:

.fa-google {
  background: 
    linear-gradient(to bottom left,transparent 49%,#fbbc05 50%) 0 25%/48% 40%,
    linear-gradient(to top    left,transparent 49%,#fbbc05 50%) 0 75%/48% 40%,
  
    linear-gradient(-40deg ,transparent 53%,#ea4335 54%),
    linear-gradient( 45deg ,transparent 46%,#4285f4 48%),
    #34a853;
  background-repeat:no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/*#fbbc05*/

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">

<i class="fab fa-google fa-10x"></i>
<i class="fab fa-google fa-6x"></i>
<i class="fab fa-google fa-3x"></i>

_{Свободный перевод ответа от участника @Temani Afif.}

БЛОГ НА HUSL

FontAwesome 5 - многоцветная иконка

Ответы (1 шт):