Make Font Awesome icons in a circle?
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
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/