Is it possible to change between two fontawesome icons on hover?

javascript html css font-awesome

BaconJuice · Oct 21, 2013 · Viewed 30.6k times · Source

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.

Answer

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>

_CSS:

.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";
}