24

FontAwesome 5 offers thousands of icons that are built with SVG. This way, it's easy to color the entire icon by using fill. But what if I want to use multiple colors? For example, given the icon Google, I want to color it like so:

CSS multi color icon of Google

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Eliya Cohen
  • 10,716
  • 13
  • 59
  • 116
  • Create each icon colored part separately as a character and stack them on top of each other. – connexo Sep 30 '18 at 14:23
  • @connexo That was my first thought. The thing is, how do I separate the icon into three parts? – Eliya Cohen Sep 30 '18 at 14:26
  • 1
    Like you create any other icon. Use an SVG program and paint it yourself. – connexo Sep 30 '18 at 14:28
  • But the whole point of my question is to achieve it by using FontAwesome. Without it, I can simply use this SVG, without cutting, and place it instead of FontAwesome. – Eliya Cohen Sep 30 '18 at 14:31
  • You can't do that using only FontAwesome, it's simply not for this purpose. But you can find SVG icons which contain multiple parts (and can be colored separately), e.g.: https://www.flaticon.com/free-icon/search_281764 – juzraai Sep 30 '18 at 14:43

3 Answers3

50

By using gradient for the color and two icons we may achieve this but it remains a hacky way and you need to handle each case (icon + coloration) specifically:

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

We can also consider the use of conic-gradient() with one icon. Again, it is specific to this particular case:

.fa-google {
  background: conic-gradient(from -45deg, #ea4335 110deg, #4285f4 90deg 180deg, #34a853 180deg 270deg, #fbbc05 270deg) 73% 55%/150% 150% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
<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>

Fontawesome Google icon multi color

The above will not work in all the browser so you can consider multiple linear-gradient like below:

.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
  • 245,468
  • 26
  • 309
  • 415
1

There is no way you can achieve that with FontAwesome (or any other available icon font) without making your hands dirty - that is, modifying the font and creating your own custom HTML and CSS on top of the partial icon characters you created.

Create each icon colored part separately as a character and stack them on top of each other. The example stacks two existing FA-icons to show the 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>
connexo
  • 53,704
  • 14
  • 91
  • 128
-1
.fa-google-g-new {
  background: conic-gradient(from -45deg, #ea4335 110deg, #4285f4 90deg 180deg, #34a853 180deg 270deg, #fbbc05 270deg) 72% 54%/151% 151% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

use this class .fa-google-g-new  as new with font awesom
Ali Umair
  • 690
  • 7
  • 10