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