FontAwesome 5 - 多色图标

新手上路,请多包涵

FontAwesome 5 提供了数千个使用 SVG 构建的图标。这样,很容易使用 fill 为整个图标着色。但是如果我想使用多种颜色怎么办?例如,给定图标 Google ,我想像这样给它上色:

Google 的 CSS 多色图标

原文由 Eliya Cohen 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 732
2 个回答

通过对颜色和两个图标使用渐变,我们可以实现这一点,但它仍然是一种 hacky 方式,您需要专门处理每种情况(图标 + 着色):

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

Fontawesome Google 图标多色

以上不适用于所有浏览器,因此您可以考虑多个 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 发布,翻译遵循 CC BY-SA 4.0 许可协议

在不弄脏您的手的情况下,您无法使用 FontAwesome(或任何其他可用的图标字体)实现这一点——也就是说,修改字体并在您创建的部分图标字符之上创建您自己的自定义 HTML 和 CSS。

将每个图标颜色的部分分别创建为一个角色并将它们堆叠在一起。该示例堆叠了两个现有的 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 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题