Rendi le icone Font Awesome in un cerchio?

Sto usando un font fantastico su qualche progetto ma ho alcune cose che voglio fare con icone fantastiche di font, posso facilmente chiamare un'icona come questa:

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

È possibile che tutte le icone siano sempre in cerchio tondo con bordo? Qualcosa del genere, ho una foto:

utilizzando

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

Farà l'effetto, ma il problema è che le icone sono sempre più grandi del testo o dell'elemento a fianco, delle soluzioni?

Con Font Awesome puoi facilmente usare icone sovrapposte come questa:

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

fare riferimento a Font Awesome Stacked Icons

Aggiornamento: - Fiddle per icone impilate

Non hai bisogno di trucchi CSS o HTML per questo. Font Awesome ha creato una classe per questo - fa-circle Per impilare più icone insieme puoi usare la classe fa-stack sul div genitore

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

// E ora abbiamo l'icona di Facebook all'interno della cerchia :)

Icona del carattere in un cerchio usando emcome misura di base

se usi ems per le misurazioni, incluso line-height, font-sizee border-radius, con text-align: centeresso rende le cose piuttosto solide:

#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 */
}

Aggiornamento: piuttosto usare flex.

Se vuoi la precisione, questa è la strada da percorrere.

Violino. Vai a giocare -> http://jsfiddle.net/atilkan/zxjcrhga/

Ecco l'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>

Ecco il 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;
}

Divertiti

Puoi anche farlo. Volevo aggiungere un cerchio attorno alle icone del mio icomoon. Ecco il codice

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

AGGIORNAMENTO :

Di recente, imparando il flex, c'è un modo più pulito (niente tavoli e meno css). Imposta il wrapper come display: flex;e per centrare i suoi figli dandogli le proprietà align-items: center;per il justify-content: center;centraggio (verticale) e (orizzontale).

Vedi questo JS Fiddle aggiornato

Strano che nessuno l'abbia suggerito prima. Uso sempre le tabelle per farlo.
Basta fare in modo che un involucro abbia display: tablee centrare le cose al suo interno per l'allineamento text-align: centerorizzontale e vertical-align: middleverticale.

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

e alcuni sass come questo

.wrapper{
  display: table; 

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

}

o vedi questo JS Fiddle

Questo è l'approccio che non è necessario utilizzare padding, basta impostare heighte widthper ae lasciare che la flexmaniglia sia 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>

L'esempio che segue non ha funzionato abbastanza per me, questa è la versione che ho fatto funzionare!

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

prova questo

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

Font Le icone fantastiche vengono inserite come: prima. Quindi puoi modellare il tuo io o un simile così:

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

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

Puoi semplicemente ottenere l'icona rotonda usando questo codice:

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

Ora il tuo CSS sarà:

.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;}

Mi piace la risposta di Dave Everitt con l '"altezza della linea", ma funziona solo specificando l' "altezza" e quindi dobbiamo aggiungere "! Importante" all'altezza della linea ...

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

Questa è la soluzione migliore e più precisa che ho trovato finora.

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