FontAwesome 5 は、SVGで構築された何千ものアイコンを提供します。このように、fill
を使用してアイコン全体に色を付けるのは簡単です。しかし、複数の色を使用したい場合はどうなりますか?たとえば、アイコン Google を指定して、次のように色を付けます。
色と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>
FontAwesome(またはその他の利用可能なアイコンフォント)で手を汚さずにそれを実現する方法はありません。つまり、フォントを変更し、作成した部分的なアイコン文字の上に独自のカスタムHTMLおよびCSSを作成します。
各アイコンの色の部分を個別にキャラクターとして作成し、それらを互いの上に積み重ねます。この例では、2つの既存の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>