¿Hacer iconos de Font Awesome en un círculo?

Estoy usando Font Awesome en algún proyecto, pero tengo algunas cosas que quiero hacer con los iconos de Font Awesome, puedo llamar fácilmente a un icono como este:

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

¿Es posible que todos los íconos estén siempre en círculo con borde? Algo como esto, tengo una foto:

Utilizando

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

Hará el efecto, pero el problema es que los íconos siempre son más grandes que el texto o elemento al lado, ¿alguna solución?

Con Font Awesome puedes usar fácilmente iconos apilados como este:

<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>

consulte los iconos apilados de Font Awesome

Actualización: - Violín para iconos apilados

No necesitas trucos css o html para ello. Font Awesome ha creado una clase para ello: fa-circle Para apilar varios iconos juntos, puede usar la clase fa-stack en el div padre

<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span> 

// Y ahora tenemos el icono de Facebook dentro del círculo :)

Icono de fuente en un círculo usando em como medida base

si usa ems para las mediciones, incluido line-height, font-sizey border-radiuscon text-align: centereso hace que las cosas sean bastante sólidas:

#info i {
  font-size: 1.6em;
  width: 1.6em;
  text-align: center;
  line-height: 1.6em;
  background: #666;
  color: #fff;
  border-radius: 0.8em; /* or 50% width & line-height */
}

Actualización: más bien use flex.

Si quieres precisión, este es el camino a seguir.

Violín. Ir a jugar -> http://jsfiddle.net/atilkan/zxjcrhga/

Aquí está el HTML

<div class="sosial-links">
    <a href="#"><i class="fa fa-facebook fa-lg"></i></a>
    <a href="#"><i class="fa fa-twitter fa-lg"></i></a>
    <a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
    <a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
</div>

Aquí está el CSS

.sosial-links a{
    display: block;
    float: left;
    width: 36px;
    height: 36px;
    border: 2px solid #909090;
    border-radius: 20px;
    margin-right: 7px; /*space between*/

} 
.sosial-links a i{
    padding: 12px 11px;
    font-size: 20px;
    color: #909090;
}

Que te diviertas

También puedes hacer esto. Quería agregar un círculo alrededor de mis iconos de icomoon. Aquí está el código.

span {
font-size: 54px;
border-radius: 50%;
border: 10px solid rgb(205, 209, 215);
padding: 30px;
}

ACTUALIZACIÓN :

Al aprender flex recientemente, hay una forma más limpia (sin tablas y menos CSS). Establezca el contenedor como display: flex;y para centrar sus elementos secundarios, asígnele las propiedades align-items: center;de justify-content: center;centrado (vertical) y (horizontal).

Ver este JS Fiddle actualizado

Es extraño que nadie sugiriera esto antes. Siempre uso tablas para hacer esto.
Simplemente haga que una envoltura tenga display: tabley centre las cosas dentro de ella para alineación text-align: centerhorizontal y vertical-align: middlevertical.

<div class='wrapper'>
  <i class='icon fa fa-bars'></i>
</div>

y algunos tontos como este

.wrapper{
  display: table; 

  i{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }

}

o ver este JS Fiddle

Este es el enfoque que no necesita usar padding, solo configure el heighty widthpara el ay deje que se flexmaneje margin: 0 auto.

.social-links a{
  text-align:center;
	float: left;
	width: 36px;
	height: 36px;
	border: 2px solid #909090;
	border-radius: 100%;
	margin-right: 7px; /*space between*/
    display: flex;
    align-items: flex-start;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
} 
.social-links a i{
	font-size: 20px;
    align-self:center;
	color: #909090;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    margin: 0 auto;
}
.social-links a i::before{
  display:inline-block;
  text-decoration:none;
}
.social-links a:hover{
  background: rgba(0,0,0,0.2);
}
.social-links a:hover i{
  color:#fff;
}

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="social-links">
    <a href="#"><i class="fa fa-facebook fa-lg"></i></a>
    <a href="#"><i class="fa fa-twitter fa-lg"></i></a>
    <a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
    <a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
</div>

El siguiente ejemplo no funcionó para mí, ¡esta es la versión que hice funcionar!

HTML:

<div class="social-links">
    <a href="#"><i class="fa fa-facebook fa-lg"></i></a>
    <a href="#"><i class="fa fa-twitter fa-lg"></i></a>
    <a href="#"><i class="fa fa-google-plus fa-lg"></i></a>
    <a href="#"><i class="fa fa-pinterest fa-lg"></i></a>
</div>

CSS:

.social-links {
    text-align:center;
}

.social-links a{
    display: inline-block;
    width:50px;
    height: 50px;
    border: 2px solid #909090;
    border-radius: 50px;
    margin-right: 15px;

}
.social-links a i{
    padding: 18px 11px;
    font-size: 20px;
    color: #909090;
}

prueba esto

HTML:

<div class="icon-2x-circle"><i class="fa fa-check fa-2x"></i></div>

CSS:

i {
    width: 30px;
    height: 30px;
}

.icon-2x-circle {
    text-align: center;
    padding: 3px;
    display: inline-block;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    -moz-box-shadow: 0px 0px 2px #888;
    -webkit-box-shadow: 0px 0px 2px #888;
    box-shadow: 0px 0px 2px #888;
}

Los iconos de Font Awesome se insertan como: antes. Por lo tanto, puede diseñar su i o un estilo similar:

.i {
   background: #fff;
   border-radius: 50%;
   display: inline-block;
   height: 20px;   
   width: 20px;
}

<a href="#"><i class="fa fa-facebook fa-lg"></i></a>

Simplemente puede obtener el icono redondo usando este código:

<a class="facebook-share-button social-icons" href="#" target="_blank">
    <i class="fab fa-facebook socialicons"></i>
</a>

Ahora tu CSS será:

.social-icons {
display: inline-block;border-radius: 25px;box-shadow: 0px 0px 2px #888;
padding: 0.5em;
background: #0D47A1;
font-size: 20px;
}
.socialicons{color: white;}

Me gusta la respuesta de Dave Everitt con la «altura de línea», pero solo funciona especificando la «altura» y luego tenemos que añadir «! Important» a la altura de línea ...

.cercle {
    font-size: 2em;
    width: 2em;
    height: 2em;
    text-align: center;
    line-height: 2em!important;
    background: #666;
    color: #fff;
    border-radius: 2em;
}

Esta es la mejor y más precisa solución que he encontrado hasta ahora.

CSS:

.social .fa {
      margin-right: 1rem;
      border: 2px #fff solid;
      border-radius: 50%;
      height: 20px;
      width: 20px;
      line-height: 20px;
      text-align: center;
      padding: 0.5rem;
    }