title: Issue with drawing borders CSS font awesome icons
body: <p>i am using css awesome font icons (<a href="https://fortawesome.github.io/Font-Awesome/" rel="nofollow noreferrer">https://fortawesome.github.io/Font-Awesome/</a>) and i am trying to draw circle or square borders around them using css rules. </p>
  
  <pre><code>&lt;i class="fa fa-check-circle fa-5x fa-square"&gt;&lt;/i&gt;
  </code></pre>
  
  <p>The targeted css rules are..</p>
  
  <pre><code>.fa-circle {  color: #b0b0b0; border-radius: 50%;  border: 10px solid #b0b0b0; padding: 0.5em; float:left; margin-right: 1em;  }
  .fa-square {   color: #b0b0b0;  border-radius:50%; border: 10px solid #b0b0b0; padding: 0.5em; float:left; margin-right: 1em; }
  </code></pre>
  
  <p>The original check circle without borders looks like this..
  <a href="https://i.stack.imgur.com/QmmQp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QmmQp.png" alt="enter image description here"></a></p>
  
  <p>The real output when drawn a border shows strange output in FF and safari
  <a href="https://i.stack.imgur.com/R4DTo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R4DTo.png" alt="enter image description here"></a></p>
  
  <p>I used this line from other thread, but it is not working.</p>
  
  <p><code>text-rendering: optimizeLegibility;</code></p>
  
  <p>How do i fix?</p>