Menu
Base in the Font Awesome documentation I create this icon:
<span class="fa-stack fa-5x"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-flag fa-stack-1x fa-inverse"></i> </span> This code create this html:
<span class="fa-stack fa-5x"> <i class="fa fa-circle fa-stack-2x">::before</i> <i class="fa fa-flag fa-stack-1x fa-inverse">::before</i> </span> It is a stacked Flag icon. I want to change the icon color on Hover event, I tried with all these:
.fa-stack:hover{ color: red } .fa-stack i:hover{ color: red } .fa-stack i before:hover{ color: red } but not working.
748
To change the color of the icons, simply add or change the “color” property in the CSS. So to change the color of the icons to red in the above example, add “color:red” to the .
To change the color of an icon, select the icon you'd like to edit. The Format tab will appear. Then click Graphics Fill and select a color from the drop-down menu. To add an outline to your icon, click Shape Outline and select a color from the drop-down menu.
To increase fa-bold font awesome icon size, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes along with icon class fa-bold. Increase in icon size will be relative to their parent container.
if you want to change only the colour of the flag on hover use this:
http://jsfiddle.net/uvamhedx/
.fa-flag:hover { color: red; }<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <i class="fa fa-flag fa-3x"></i>use - !important - to override default black
.fa-heart:hover{ color:red !important; } .fa-heart-o:hover{ color:red !important; }<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <i class="fa fa-heart fa-2x"></i> <i class="fa fa-heart-o fa-2x"></i>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
