Html

FontAwesome5-マルチカラーアイコン



Fontawesome 5 Multi Color Icon



解決：

色と2つのアイコンにグラデーションを使用することで、これを実現できますが、 ハッキー 方法とあなたは具体的に各ケース（アイコン+色）を処理する必要があります：

.fa-google path {fill：url（＃grad1）; } .fa-google + .fa-google path {fill：url（＃grad2）; } .icon {display：inline-block;位置：相対; } .fa-google + .fa-google {position：absolute;左：0; top：0;クリップパス：polygon（0％0％、120％0％、0％75％）; }
        
の使用も検討できます1つのアイコンを持つconic-gradient（）。繰り返しますが、これはこの特定のケースに固有です。

 
 
.fa-google {背景：円錐勾配（-45度から、＃ea4335 110度、＃4285f4 90度180度、＃34a853 180度270度、＃fbbc05 270度）73％55％/ 150％150％繰り返しなし; -webkit-background-clip：テキスト;背景クリップ：テキスト;色：透明; -webkit-text-fill-color：透明; }
           
 FontawesomeGoogleアイコンマルチカラー
 
上記はすべてのブラウザで機能するとは限らないため、複数のブラウザを検討できます以下のような線形勾配：
 
 
 
.fa-google {背景：線形グラデーション（左下、透明49％、＃fbbc05 50％）0 25％/ 48％40％、線形グラデーション（左上、透明49％、＃fbbc05 50％） 0 75％/ 48％40％、線形グラデーション（-40度、透明53％、＃ea4335 54％）、線形グラデーション（45度、透明46％、＃4285f4 48％）、＃34a853; background-repeat：no-repeat; -webkit-background-clip：テキスト;背景クリップ：テキスト;色：透明; -webkit-text-fill-color：透明; } / *＃fbbc05 * /