Menu
I have an anchor tag with a font-awesome icon as follows
<a href="#" class="lock"><i class="icon-unlock"></i></a> Is it possible to change to icon on hover to a different icon?
my CSS
.lock:hover{color:red} Aside from the icon turning red I'd also like to change the icon to the following
<i class="icon-lock"></i> Is this possible without the help of JavaScript? Or do I need Javascript/Jquery on hover for this?
Thank you.
954
Answer: Use the CSS background-image property You can simply use the CSS background-image property in combination with the :hover pseudo-class to replace or change the image on mouseover.
To stack multiple icons, use the fa-stack class on the parent HTML element of the 2 icons you want to stack. Then add the fa-stack-1x class for the regularly sized icon and add the fa-stack-2x class for the larger icon. fa-inverse can be added to the icon with the fa-stack-1x to help with a knock-out looking effect.
You could toggle which one's shown on hover:
HTML:
<a href="#" class="lock"> <i class="icon-unlock"></i> <i class="icon-lock"></i> </a> .lock:hover .icon-unlock, .lock .icon-lock { display: none; } .lock:hover .icon-lock { display: inline; } Or, you could change the content of the icon-unlock class:
.lock:hover .icon-unlock:before { content: "\f023"; } 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
