title: Make Font Awesome icons in a circle border with right 1:1 ratio
body: <p>In some case, if the ratio of the icon is not 1:1, the border is not a circle anymore.</p>
  
  <p>Here's an example:</p>
  
  <p><a href="https://i.stack.imgur.com/A2ip6.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A2ip6.jpg" alt="enter image description here"></a></p>
  
  <p>I'm currently using:</p>
  
  <pre><code>HTML:
  
  .socials
        a(href='#') &lt;i class="fa fa-facebook"&gt;&lt;/i&gt;
        a(href='#') &lt;i class="fa fa-twitter"&gt;&lt;/i&gt;
        a(href='#') &lt;i class="fa fa-google"&gt;&lt;/i&gt;
  
  SASS:
  
        border-radius: 50%
        border: solid white
        padding: 10px
  </code></pre>
  
  <p>Is there anyway that I can use CSS to fix the problem? </p>