title: FontAwesome icon with a circle
body: <p>I am trying to create fontawesome icons within a circle and I have used border css for the same to achieve. However, for different font icons, the border is not circular, it changes it's shape for some of the icons like facebook.</p>
  
  <p>I have following code snippet, in which facebook border isn't circular. Can you kindly let me know how to achieve circular (exact circle) border for all icons, irrespective of their sizes (event twitter and server icons aren't looking like uniform circles)?</p>
  
  <p><a href="https://jsfiddle.net/1d7fvLy5/1/" rel="nofollow noreferrer">https://jsfiddle.net/1d7fvLy5/1/</a></p>
  
  <pre><code>i.fa {
    margin: 0.5em;
    font-size: 4em;
    color: #303030;
    border: 2px solid #303030;
    border-radius: 50%;
    padding: 0.5em;
    transition: all .5s ease;
  }
  
  i.fa:hover{
    color:lightblue;
     border: 2px solid lightblue;
    cursor:pointer;
  }
  </code></pre>