title: Font awesome 4 and 5 in same page
body: <p>I have a conflict with font awesome when 2 different css versions are used. I am not trying to use 2 different version, but my plugin embeds one version and sometimes a wordpress website has another version.</p>
  
  <p>I am interested in this particular example, why doesnt first icon display if they both have same :before content?</p>
  
  <p>(I have noticed it works if fa5 is linked first in the page)</p>
  
  <p>What would be the easiest solution to handle this?</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-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/&gt;
  &lt;link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet"/&gt;
  
  &lt;i class="fa fa-facebook"&gt;&lt;/i&gt;
  
  &lt;i class="fab fa-facebook-f"&gt;&lt;/i&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/pfbx5865/1/" rel="noreferrer">https://jsfiddle.net/pfbx5865/1/</a></p>