Make Font Awesome icons in a circle?

css, font-awesome

Solution

i.fa {
  display: inline-block;
  border-radius: 60px;
  box-shadow: 0 0 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>

JsFiddle of old answer: http://fiddle.jshell.net/4LqeN/

Problem

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?

Original source