3

I have some styles defined for the Fontawesome icons to color the browser icons into their corresponding brand color. So Opera icon is red, IE blue, and Firefox orange.

But since Chrome has 4 different colors, and very harshly separated, I'm wondering if it's possible to mimic something close to that with CSS only?

The closest I know to get there is gradients, but obviously it doesn't get close to looking correct. 

i.fa-chrome {
  font-size: 3rem;
  background-image: linear-gradient(to bottom right, yellow, limegreen, crimson, blue, blue);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="p-3">
  <i class="fa fab fa-chrome"></i>
</div>

Could something more be done here with some background clipping and CSS hackery to look closer to the original icon's visual identity?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Digital Ninja
  • 3,415
  • 5
  • 26
  • 51
  • 2
    Does this answer your question? [FontAwesome 5 - Multi color icon](https://stackoverflow.com/questions/52578726/fontawesome-5-multi-color-icon) – J4R Apr 06 '20 at 17:43
  • 1
    Sort of, maybe. I'll have to play with it to see if i know how to change that into fitting a chrome icon with a circular color section in the middle. Will update question later. – Digital Ninja Apr 06 '20 at 17:51

1 Answers1

6

With multiple background you can do it but as I wrote in this pevious answer it remain specific to this particular icon:

.fa-chrome {
  font-size: 3rem;
  background: 
      linear-gradient(to bottom left, transparent 49%,#ea4335 50%) 105% 0%  /37% 30%,
      linear-gradient(to bottom right,transparent 49%,#fbbc05 50%) 64% 100% /35% 43%,
     
      radial-gradient(farthest-side, #4285f4 46%,transparent 47%),
      linear-gradient( 47deg,        #34a853 42%,transparent 43%),
      linear-gradient(-72deg,        #fbbc05 42%,transparent 43%),
      linear-gradient(-199deg,       #ea4335 42%,transparent 43%);
  background-repeat:no-repeat;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<i class="fab fa-chrome fa-8x"></i>
<i class="fab fa-chrome fa-5x"></i>
<i class="fab fa-chrome fa-3x"></i>

The same code with the V4 of Font Awesome

.fa-chrome {
  background: 
      linear-gradient(to bottom left, transparent 49%,#ea4335 50%) 105% 0%  /37% 30%,
      linear-gradient(to bottom right,transparent 49%,#fbbc05 50%) 64% 100% /35% 43%,
     
      radial-gradient(farthest-side, #4285f4 46%,transparent 47%),
      linear-gradient( 47deg,        #34a853 42%,transparent 43%),
      linear-gradient(-72deg,        #fbbc05 42%,transparent 43%),
      linear-gradient(-199deg,       #ea4335 42%,transparent 43%);
  background-repeat:no-repeat;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<i class="fa fa-chrome fa-5x"></i>
<i class="fa fa-chrome fa-4x"></i>
<i class="fa fa-chrome fa-2x"></i>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415