title: Font-Awesome 5 - CSS Pseudo-elements, how to mirror/rotate icon
body: <p>I am using css pseudo elements to render icons (<a href="http://jsfiddle.net/4Rakx/4633/" rel="nofollow noreferrer">jsfiddle</a>)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" rel="stylesheet"/&gt;
  &lt;a href="#"&gt;This is a link&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is there a way to rotate or mirror a icon?</p>