FontAwesome 5 提供了数千个使用SVG构建的图标。这样,使用 fill 即可为整个图标着色。但是,如果我想使用多种颜色怎么办?例如,给定图标 Google ,我想为其着色:
FontAwesome 5 offers thousands of icons that are built with SVG. This way, it's easy to color the entire icon by using fill. But what if I want to use multiple colors? For example, given the icon Google, I want to color it like so:
推荐答案
通过对颜色和两个图标使用渐变,我们可以实现此目的,但它仍然是 hacky 方式,专门处理每种情况(图标+着色):
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:
.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="use.fontawesome/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 ()(带有一个图标)。同样,它特定于此特定情况:
We can also consider the use of conic-gradient() with one icon. 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="use.fontawesome/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 如下:
The above will not work in all the browser so you can consider multiple linear-gradient like below:
.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="use.fontawesome/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 5
发布评论