[css] Make Font Awesome icons in a circle?

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:

enter image description here


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?

This question is related to css font-awesome

The answer is

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>

refer Font Awesome Stacked Icons

Update:- Fiddle for stacked icons

Similar questions with css tag:

Similar questions with font-awesome tag: