Css – Make Font Awesome icons in a circle

cssfont-awesome

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

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?

Best Answer

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

Related Topic