css - Make Font Awesome icons in a circle?

Question

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:

<i class="fa fa-lock"></i>

Is it possible to all icon always be in round circle with border? Something like this, I have a picture:

Using

i {
  background-color: white;
  border-radius: 50%;
  border: 1px solid grey;
  padding: 10px;
}

Will do the effect, but the problem is that icons are always bigger that the text or element beside, any solutions?

Answer 1

With Font Awesome you can easily use stacked icons like this:

<span class="fa-stack fa-2x">
  <i class="fas fa-circle-thin fa-stack-2x"></i>
  <i class="fas fa-lock fa-stack-1x fa-inverse"></i>
</span>

refer Font Awesome Stacked Icons

Update:- Fiddle for stacked icons