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 ?
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 ?
Share Improve this question edited Jun 5, 2019 at 8:51 Temani Afif 273k28 gold badges364 silver badges483 bronze badges asked Jun 5, 2019 at 8:42 ganesh kaspateganesh kaspate 2,68512 gold badges51 silver badges104 bronze badges 2-
2
fa-flip-horizontal– Thomas Commented Jun 5, 2019 at 8:46 -
1
BTW you can use css(in case you won't use
font-awesomeand you want to change direction) withtransform: scaleX(-1):jsfiddle/29ctojxb – לבני מלכה Commented Jun 5, 2019 at 8:56
3 Answers
Reset to default 9You can use the fa-flip-horizontal class as documented here.
<link href="https://cdnjs.cloudflare./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> 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./how-to-use/on-the-web/styling/rotating-icons
Considering the JS+SVG version you can use flip-h to flip the icon horizontally
<script defer src="https://use.fontawesome./releases/v5.8.1/js/all.js"></script>
<i class="fas fa-unlock-alt" data-fa-transform="flip-h"></i>More details: https://fontawesome./how-to-use/on-the-web/styling/power-transforms