Font-Awesome 5 - CSS伪元素，如何mirror/rotate图标

Question

我正在使用 css 伪元素来呈现图标 (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>

有没有办法旋转或镜像图标？

Answer 1

使用CSS旋转图标：transform: rotate(45deg)

或者使用 transform: scaleX(-1).

镜像它

Answer 2

您可以使用 transform 属性来旋转或镜像您的图标。

请检查以下代码：

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>

Font-Awesome 5 - CSS伪元素，如何mirror/rotate图标

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

css

font-awesome

font-awesome-5