Is it possible to change between two fontawesome icons on hover?
In my templates I often use FontAwesome and I came up with this CSS trick
* > .fa-hover-show,
*:hover > .fa-hover-hidden {
display: none;
}
*:hover > .fa-hover-show {
display: inline-block;
}
Add both icons to the HTML; the default icon should have the fa-hover-hidden
class while the hover icon one should have fa-hover-show
.
<a href="#">
<i class="fa fa-lock fa-hover-hidden"></i>
<i class="fa fa-lock-open fa-hover-show"></i>
<span class="fa-hover-hidden">Locked</span>
<span class="fa-hover-show">Unlocked</span>
</a>
Given that the icon has a hover effect, it is likely that it is inside a button or link, in which case, a proper solution would be to also react to the change on :focus as well.
* > .fa-hover-show,
*:hover > .fa-hover-hidden,
*:focus > .fa-hover-hidden {
display: none;
}
*:focus > .fa-hover-show,
*:hover > .fa-hover-show {
display: inline-block;
}
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";
}