Schneider Schneider - 4 months ago 15x
CSS Question

Make Font Awesome icons in a circle?

I am using font awsome on some project but i have some things that i want to do with font awesome icons, i can easy call icon like this

<i class="fa fa-lock"></i>

Is it possible to all icon always be in round circle with border, somthing like this i have a picture

enter image description here


background-color: white;
border-radius: 50%;
border: 1x solid grey;

Will do the effect, but the problem is that icons are always bigger that txt or element beside, any solutions?


Try this:

  display: inline-block;
  border-radius: 60px;
  box-shadow: 0px 0px 2px #888;

Here is a working fiddle: you maybe need to play with the padding of the item.


As people constantly voting down my answer I'd like to point out: Check the image in the question. Op wanted a shadow as circle, not a clumsy stacked icon. If you can't google or read docs correctly, at least don't misinterpret answers.