FontAwesome 5 - 多彩图标

Question

FontAwesome 5 提供成千上万个使用 SVG 构建的图标。这种方式可以通过使用fill来轻松地对整个图标进行着色。但是如果我想要使用多种颜色呢？例如，给定图标Google，我想要像下面这样着色：

- Eliya Cohen

---

将每个图标的着色部分分别创建为字符，并将它们叠放在一起。 - connexo

@connexo 那是我的第一反应。问题是，我如何将图标分成三个部分？ - Eliya Cohen

就像创建其他任何图标一样。使用SVG程序并自己绘制它。 - connexo

但我提问的重点是要用FontAwesome来实现它。如果没有它，我可以直接使用这个SVG，而不需要切割，并将其放置在FontAwesome的位置。 - Eliya Cohen

你不能仅使用FontAwesome来完成这个目的，因为它并不适用于此。但是你可以找到包含多个部分（并且可以单独着色）的SVG图标，例如：https://www.flaticon.com/free-icon/search_281764 - juzraai

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

上述代码在某些浏览器中无法正常显示，你可以考虑使用下面的多个linear-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

---

@SathananthanSabesan https://dev59.com/ALroa4cB1Zd3GeqPfjbh#61067763？ - Temani Afif

它是用于Chrome的。新的Gmail图标有点不同。 - Sabesan

那是个聪明的技巧！ - Puspam

Answer 2

如果不修改字体并在部分图标字符上创建自定义的HTML和CSS，就没有办法使用FontAwesome（或其他可用的图标字体）来实现这一点。

将每个图标的彩色部分单独创建为一个字符，并将它们叠放在一起。下面的示例将两个现有的FA图标叠在一起以展示该技术：

.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

Answer 3

.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