Schneider Schneider - 6 months ago 20
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

Using

i
{
background-color: white;
border-radius: 50%;
border: 1x solid grey;
padding:10px;
}


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

Answer

Try this:

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

Here is a working fiddle:http://fiddle.jshell.net/4LqeN/ you maybe need to play with the padding of the item.

Update

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.