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 ?

BTW you can use css(in case you won't use `font-awesome` and you want to change direction) with `transform: scaleX(-1)` :https://jsfiddle.net/29ctojxb/ — לבני מלכה, Jun 05 '19 at 08:56

score 9 · Answer 1 · answered Jun 05 '19 at 08:46

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>

score 3 · Answer 2 · edited Jun 05 '19 at 08:52

3

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

edited Jun 05 '19 at 08:52

lealceldeiro

14,342
6
49
80

answered Jun 05 '19 at 08:46

Ichraf

345
1
7

score 1 · Answer 3 · answered Jun 05 '19 at 08:48

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

How to change the direction of a font awesome icon?

3 Answers3