come stilizzare un cerchio Fontawesome icona sfondo?

Question

C'è un modo semplice per stilizzare correttamente lo sfondo delle icone Fontawesome? Stavo provando a farlo con l'icona icon-remove-sign (che ha la particolarità di essere un cerchio) in modo da far apparire la croce in bianco e il cerchio in rosso.

La difficoltà è che l'icona è riconosciuto come un quadrato, quindi stavo cercando di renderlo un cerchio al fine di applicare il rosso background color (ma mi chiedo se non ci sia qualcosa di più semplice):

.icon-remove-sign { 
    padding: 0; 
    border-radius: 25px; 
    color: white; 
    background-color: red; 
} 

Ma non è abbastanza, possiamo vedere lo sfondo rosso nella parte superiore dell'icona.

Come lo faresti?

Answer 1

Ci si sente un po 'hacky, ma sono riuscito a farlo funzionare qui:

http://jsfiddle.net/3FvxA/

display:block e dandogli un altezza e larghezza sembra essere il segreto.

Answer 2

Con fontawesome è possibile utilizzare le icone accatastati come questo:

<span class="fa-stack fa-lg"> 
    <i class="fa fa-camera fa-stack-1x"></i> 
    <i class="fa fa-ban fa-stack-2x text-danger"></i> 
</span> 

Answer 3

Supponendo che il codice HTML simile a questo:

<div class="social-circle"> 
    <a class="fa fa-facebook" href="#"></a> 
    <a class="fa fa-twitter" href="#"></a> 
    <a class="fa fa-pinterest-p" href="#"></a> 
</div> 

Si può fare qualcosa di simile:

.social-circle [class*="fa fa-"] { 
    width: 25px; 
    height: 25px; 
    color: white; 
    background-color: grey; 
    border-radius: 25px; 
    display: inline-block; 
    line-height: 25px; 
    margin: auto 3px; 
    font-size: 15px; 
    text-align: center; 
} 
.fa-facebook:hover { 
    background-color: #3B5A9B; 
} 
.fa-twitter:hover { 
    background-color: #4FC6F8; 
} 
.fa-pinterest-p:hover { 
    background-color: #CA2128; 
} 

See l'esempio qui: http://jsfiddle.net/k69xj2n8/

.210