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?

question from:https://stackoverflow.com/questions/65918759/create-circular-image-in-two-unequal-columns-in-html

Answer 1

i.fa {
  display: inline-block;
  border-radius: 60px;
  box-shadow: 0px 0px 2px #888;
  padding: 0.5em 0.6em;

}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<i class="fa fa-wrench"></i>