Come faccio a dare un'icona impressionante di font a un colore di sfondo?

Question

Nel footer di questa pagina http://128.199.58.229/landingpage/

Ho alcune icone di carattere fantastico (icone social media).

Sto provando a dare loro uno sfondo bianco dietro le icone stesse. Lo sfondo bianco attualmente sporge. Ho letto alcuni post sull'uso di una combinazione di larghezza, altezza e raggio di confine per raggiungere questo obiettivo, ma attualmente non ha avuto successo.

.lt-bus-info .fa { 
background-color: white; 
border-radius: 50%; 
} 

Ecco un jsfiddle: http://jsfiddle.net/magician11/nfz9sucn/1/ Sto cercando solo il bianco dietro il simbolo: https://dl.dropboxusercontent.com/u/14057353/Screen%20Shot%202014-12-03%20at%204.01.18%20pm.png

Qualcuno sa come risolvere questo problema? Grazie.

Answer 1

Utilizzare invece stacked icons. Ecco uno fiddle, puoi giocare con esso per renderlo molto meglio. Di seguito è riportato il codice completo:

HTML

<ul class="list-inline"> 
    <li><a href="#"> 
     <span class="fa-stack fa-lg icon-facebook"> 
      <i class="fa fa-square fa-stack-2x"></i> 
      <i class="fa fa-facebook fa-stack-1x"></i> 
     </span> 
     </a></li> 
    <li><a href="#"> 
     <span class="fa-stack fa-lg icon-twitter"> 
      <i class="fa fa-square fa-stack-2x"></i> 
      <i class="fa fa-twitter fa-stack-1x"></i> 
     </span> 
    </a></li> 
    <li><a href="#"> 
     <span class="fa-stack fa-lg icon-gplus"> 
      <i class="fa fa-square fa-stack-2x"></i> 
      <i class="fa fa-plus fa-stack-1x"></i> 
     </span> 
     </a></li> 
</ul> 

CSS

.fa-stack-1x { 
    color:white; 
} 
.icon-facebook { 
    color:#3b5998; 
} 

.icon-twitter { 
    color:#00aced; 
} 

.icon-gplus{ 
    color:#dd4b39; 
} 

body { 
    background-color: black; 
} 

Answer 2

ero alla ricerca di una soluzione, ma non ho trovato quello perfetto con meno codice in modo spendo poco tempo e fatto questo fiddle per te.

HTML

<div class="background"> 
<i class="fa fa-facebook-square fb-btn"></i> 
<i class="fa fa-twitter-square twt-btn"></i> 
<i class="fa fa-google-plus-square gp-btn"></i> 
</div> 

CSS

.fb-btn{ 
    background-color: #fff; 
    border-radius: 50% 8px 10px 50%; 
    color: #305891; 
    font-size: 40px; 
    height: 32px; 
    line-height: 30px;width: 32px; 
    margin: 5px; 
} 

.twt-btn{ 
    background-color: #fff; 
    border-radius: 50%; 
    color: #2ca8d2; 
    font-size: 40px; 
    height: 30px; 
    line-height: 30px; 
    margin: 5px; 
    width: 30px; 
} 

.gp-btn{ 
    background-color: #fff; 
    border-radius: 50%; 
    color: #dd4b39; 
    font-size: 40px; 
    height: 30px; 
    line-height: 30px; 
    width: 30px; 
    margin: 5px; 
} 

.background{ 
    background-color:#cccccc; 
    width:150px; 
    height:60px; 
    padding:60px 50px; 
} 

Potrebbe essere necessario giocare con alcuni raggio di confine, line-height e margini, ma questo è un bene in forma e soluzione più veloce credo.

Fatemi sapere se c'è qualche errore!

Answer 3

Mi sorprende che nessuno ha menzionato ancora questo approccio:

html

  <div class="social-media text-right"> 
      <a href="" class="facebook"> 
       <span class="fa fa-facebook"></span> 
      </a> 
      </div> 

css

.social-media a 
{ 
    display: inline-block; 
    width: 34px; 
    height: 34px; 
    line-height: 34px; 
    text-align: center; 
    margin-right: 10px; 
    border-radius: 34px; 
} 
    .social-media a.facebook 
    { 
     background: #3b5998; 
    } 

Answer 4

Ecco un modo davvero cool per farlo che non è stato menzionato qui e in un paio di righe di codice sei gtg.

i.fa-smile-o { 
position: relative; 
color: #555; 
} 

i.fa-smile-o:before { 
    content: "\f111"; 
    color: #f1c40f; 
} 

i.fa-smile-o:after { 
    left: 0; 
    top: 0; 
    position: absolute; 
    content: "\f118"; 
} 

questo modo si può anche riempire il contenuto con meh o aggrottare le sopracciglia codici che possono essere trovati here, buon divertimento!

Answer 5

Il più facile probabilmente per dare la voce di elenco un colore di sfondo in questo modo

li { 
background-color: white; 
}