title: Make Font Awesome icons in a circle?
body: <p>I am using font awesome on some project but I have some things that I want to do with font awesome icons, I can easily call an icon like this:</p>
  <pre><code>&lt;i class=&quot;fa fa-lock&quot;&gt;&lt;/i&gt;
  </code></pre>
  <p>Is it possible to all icon always be in round circle with border? Something like this, I have a picture:</p>
  <p><img src="https://i.stack.imgur.com/m7xGh.jpg" alt="enter image description here" /></p>
  <p>Using</p>
  <pre><code>i {
    background-color: white;
    border-radius: 50%;
    border: 1px solid grey;
    padding: 10px;
  }
  </code></pre>
  <p>Will do the effect, but the problem is that icons are always bigger that the text or element beside, any solutions?</p>