多色的单个图标 [英] Multi-colored single icon

问题描述

我为Fontawesome图标定义了一些样式，以将浏览器图标着色为相应的品牌颜色.因此，Opera图标为红色，IE为蓝色，而Firefox为橙色.

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.

但是，由于Chrome浏览器有4种不同的颜色，并且间隔非常严格，所以我想知道是否有可能仅使用CSS来模仿与之接近的颜色?

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>

在这里还可以做一些其他事情，例如背景剪裁和CSS骇客，使其看起来更接近原始图标的视觉识别吗?

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

推荐答案

您可以在多个背景下进行操作，但是正如我在显而易见的答案，它仍然特定于该特定图标:

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>

与Font Awesome V4相同的代码

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>

这篇关于多色的单个图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！