How to flip font awesome icons

Recently came across a problem with font awesome icons.

We are required to show unlock icon. So, we showed it with:

<i class="fa fa-unlock"></i>

And it showed like:





But, we are supposed to show like:



That is, we need to flip the unlock icon.

So, after some research, found solution.

Add class fa-flip-horizontal to <i>

<i class="fa fa-unlock fa-flip-horizontal"></i>

And the unlock icon is flipped.