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

Question

I have an anchor tag with a font-awesome icon as follows

Answer 1

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.

  
  
  Locked
  Unlocked

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