Multi-colored single icon
With multiple background you can do it but as I wrote in this pevious answer it remain specific to this particular icon:
.fa-chrome { font-size: 3rem; background: linear-gradient(to bottom left, transparent 49%,#ea4335 50%) 105% 0% /37% 30%, linear-gradient(to bottom right,transparent 49%,#fbbc05 50%) 64% 100% /35% 43%, radial-gradient(farthest-side, #4285f4 46%,transparent 47%), linear-gradient( 47deg, #34a853 42%,transparent 43%), linear-gradient(-72deg, #fbbc05 42%,transparent 43%), linear-gradient(-199deg, #ea4335 42%,transparent 43%); background-repeat:no-repeat; color: transparent; -webkit-background-clip: text; background-clip: text;}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css"><i class="fab fa-chrome fa-8x"></i><i class="fab fa-chrome fa-5x"></i><i class="fab fa-chrome fa-3x"></i>
FontAwesome 5 - Multi color icon
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="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>
create multicolor icons. Icomoon
Creating multicolored icon fonts with icomoon is fairly easy but it combines them from multiple glyphs off course and seems to have no knowledge of a "default" color (the color which can be changed from the parent class) - so we need do define it as inherit
in the CSS :
1) Create your SVGs with your favorite vector app like Inkscape or Adobe Illustrator.
Important : Icomoon (and anything else) will use one glyph for each colored path in the SVG, so make sure to join the pathes with the same color and don't use too many colors …
Illustrator makes it easy to join compound pathes : https://www.youtube.com/watch?v=jbc3q9bfOH8 and to join objects: https://graphicdesign.stackexchange.com/questions/999/how-do-i-combine-two-objects-into-one-in-illustrator …
2) Make your icomoon font.
3) Determine your "default" color in the CSS - lets say it is rgb(62, 55, 60);
:
In [class^="icon-"], [class*=" icon-"] {
add
/* default color */
color: rgb(62, 55, 60);
and remove every other line reading
color: rgb(62, 55, 60);
or to be explicit change it to
color: inherit;
That's it.
When I only use two colors (e.g. the darkgrey and orange) properly joined I would never get more than two children in the icon and I could change the darkgrey from the root node <span class="icon-myIconName">
...
Here is a working codepen with a 2-color font used with only one element where you can change the color …
Multi color on font awesome icon with css
Everything is possible in web design but maybe you manage to use some trick:
i{ float:left; position: relative;}.ratingbox{ display: block; clear: both;}.fa-star-half-o,.fa-star{ color: #ffab00; }.rated{ color: #ffab00; cursor: pointer;}
.unrated{ color: #757575; cursor: pointer;}
.fa-star-half-empty:after, .fa-star-half-full:after, .fa-star-half-o:after { content: "\f123"; transform: rotateY(-180deg); display: inline-block; left: 6px; position: absolute; top: 0; color: #757575; overflow: hidden; width: 8px;}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/><div class="ratingbox"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-half-o"></i><i class="fa fa-star unrated"></i><i class="fa fa-star enlang unrated"></i></div>
How to change the color of a icon among multiple icons one at a time using click event in angular
<div class="container">
<button *ngFor="let btn of btnArr" type="button" class="buttonstyle"
[style.background-color]="selectedButton === btn ? '#FF0000' : 'grey'" (click)="selectedButton = btn">
{{btn}}
</button>
</div>
<div class="container">
<i (click)="selectedIcon = icon.id" class="smiley" [ngClass]="icon.class"
[style.color]="selectedIcon === icon.id ? '#FF0000' : '#000000'" *ngFor="let icon of iconsArr"></i>
</div>
In component ts file
btnArr = ["BUTTON-1", "BUTTON-2", "BUTTON-3", "BUTTON-4", "BUTTON-5", "BUTTON-6"];
selectedButton = "";
iconsArr = [
{ id: 1, class: "icon-face-1" },
{ id: 2, class: "icon-face-2" },
{ id: 3, class: "icon-face-3" },
{ id: 4, class: "icon-face-4" },
{ id: 5, class: "icon-face-5" },
{ id: 6, class: "icon-face-6" }
];
selectedIcon = 0;
Related Topics
How to Keep Bootstrap 3 Navbar as Collapsed for All Screen Sizes
Matching First Element in Whole Document
How to Get Font to Display Properly in All Browsers
Why Is "Border-Color" Overridden by "Color"
CSS: Checked - Change <Td> Background
How to Include The Box-Shadow in The Div Area That Responds to a Click Event
Flex Items Are Shrinking Below Flex-Basis
Place Tab in Shiny Tabsetpanel on The Right
Please Explain in Detail This Part of Yui3 CSS Reset
How to Style Inner Elements of Custom Polymer Element Using External Styles
Why Is Themeprovider (Material UI) Not Working for Me Here
CSS3 Selector Last Element That Is Not of Class X
How to Integrate a Thunderbird Extension with Lightning
CSS - Style Svg Fill with Class Name
Add Ancestor Selector in Current SASS Nesting
How to Make CSS Grid Last Row to Take Up Remaining Space
Primefaces Schedule Event Color Is Not Working After Replacing Primefaces Jar 3.3 by 4.0