[英]FontAwesome 5 - Multi color icon
FontAwesome 5 offers thousands of icons that are built with SVG. FontAwesome 5提供了数千个使用 SVG 构建的图标。 This way, it's easy to color the entire icon by using
fill
.这样,很容易使用
fill
为整个图标着色。 But what if I want to use multiple colors?但是如果我想使用多种颜色怎么办? For example, given the icon Google , I want to color it like so:
例如,给定图标Google ,我想像这样给它上色:
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:通过对颜色和两个图标使用渐变,我们可以实现这一点,但它仍然是一种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>
We can also consider the use of conic-gradient()
with one icon.我们也可以考虑使用带有一个图标的
conic-gradient()
。 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>
The above will not work in all the browser so you can consider multiple linear-gradient
like below:以上不适用于所有浏览器,因此您可以考虑如下所示的多个
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>
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.您无法使用 FontAwesome(或任何其他可用的图标字体)在不弄脏手的情况下实现这一点 - 也就是说,修改字体并在您创建的部分图标字符之上创建您自己的自定义 HTML 和 CSS。
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:
该示例堆叠了两个现有的 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>
.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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.