Font-Awesome 5 - CSS Pseudo-elements, how to mirror/rotate icon

Question

I am using css pseudo elements to render icons (jsfiddle)

body {
    font-family: Arial;
    font-size: 13px;
}

a {
    text-decoration: none;
    color: #515151;
}

a:before {
   font-family: "Font Awesome 5 Free";
   content: "\f07a";
   display: inline-block;
   padding-right: 3px;
   vertical-align: middle;
   font-weight:900;
}

<link href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" rel="stylesheet"/>
<a href="#">This is a link</a>

Is there a way to rotate or mirror a icon?

why asking a question if you know the duplicate? by the way here is a more suitable duplicate: https://stackoverflow.com/a/55435476/8620333 — Temani Afif, Dec 02 '19 at 11:20
@TemaniAfif, I found the duplicate after asking the question... — Black, Dec 02 '19 at 11:22
or maybe your question is unclear ... you asked *Is there a way to rotate or mirror a icon?* which is answered in the link I provided and also the below answers (maye they are also wrong for you ..) — Temani Afif, Dec 02 '19 at 11:25
there is two answers in my duplicate, one with `i` element and one with transform (exactly like the below answers) — Temani Afif, Dec 02 '19 at 11:27
@TemaniAfif, Then why are you linking to the wrong answer which does not fit to my question? My duplicate is fitting my question much better obviously — Black, Dec 02 '19 at 11:30
I grabed the first link I found when searching on my answers. I thought it would be trivial that you will check the whole Q&A since a duplicate is about everything and not only one answer. — Temani Afif, Dec 02 '19 at 11:33
@TemaniAfif, no, because the question is not even referencing css pseudo elements but is about the `` tag way... — Black, Dec 02 '19 at 11:34

score 3 · Accepted Answer · edited Dec 02 '19 at 11:38

You can use transform property to rotate or mirror your icon.

Please check below code:

body {
    font-family: Arial;
    font-size: 13px;
}

a {
    text-decoration: none;
    color: #515151;
}

a:before {
   font-family: "Font Awesome 5 Free";
   content: "\f07a";
   display: inline-block;
   padding-right: 3px;
   vertical-align: middle;
   font-weight:900;
}

a:last-of-type:before {
   font-family: "Font Awesome 5 Free";
   content: "\f07a";
   display: inline-block;
   padding-right: 3px;
   vertical-align: middle;
   font-weight:900;
   transform: rotateY(180deg);
}

<link href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" rel="stylesheet"/>
<a href="#">This is a link</a>
<a href="#">This is a link</a>

score 0 · Answer 2 · edited Dec 02 '19 at 11:38

0

Use CSS to rotate the icon: transform: rotate(45deg)

Or to mirror it use transform: scaleX(-1).

edited Dec 02 '19 at 11:38

Black

18,150
39
158
271

answered Dec 02 '19 at 11:15

Red

6,599
9
43
85

Font-Awesome 5 - CSS Pseudo-elements, how to mirror/rotate icon

2 Answers2