How to change the direction of a font awesome icon?

Question

I am using the font-awsome library to show a unlock icon .

So, By default the direction is in right direction, I want to change that to the left.

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

SO, is there any way through which I can change the direction of the unlock icon ?

Answer 1

You can use the fa-flip-horizontal class as documented here.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" rel="stylesheet"/>

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

Answer 2

You can rotate and flip icons with font awesome. In your case you can try this:

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

Check out this link for more information https://fontawesome.com/how-to-use/on-the-web/styling/rotating-icons

Answer 3

Considering the JS+SVG version you can use flip-h to flip the icon horizontally

<script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js"></script>

<i class="fas fa-unlock-alt" data-fa-transform="flip-h"></i>

More details: https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms