Quelle icone sono gestite da diversi file css di bootstrap.Puoi verificare tu stesso. Ti spiego come fare attraverso gli strumenti di sviluppo del tuo browser.
Apri quella pagina e fai click destro su una qualsiasi di quelle icone, quindi seleziona "Analizza elemento" (o "Ispeziona" o qualcosa di simile a seconda del browser che stai usando); ti verrà aperto il pannello degli strumenti di sviluppo, dove (nella scheda "Analisi pagina" o "Elementi" o qualcosa del genere) vedrai il "nodo" html selezionato.
Probabilmente troverai selezionato l'elemento <i> in cui è definita la grafica dell'icona (cioè un carattere prelevato da font.awesome) ma il riquadro dell'icona è definito attraverso l'elemento <a> (che contiene <i>). Nella scheda "Analisi pagina" (o qualcosa del genere) del pannello degli strumenti, puoi selezionare quel particolare nodo html (cioè l'elemento <a> che contiene <i>). Affianco dovresti vedere la scheda "Regole" (o qualcosa del genere) che mostra tutte le regole css applicate a quell'elemento.
In quella scheda, affianco ad ogni selettore css (relativo all'elemento selezionato) è mostrato il nome del file css (o il foglio di stile in linea) e la riga in cui tale selettore è definito. Sotto il selettore puoi vedere le relative regole applicate.
Scorrendo la lista di selettori e regole, puoi trovare il selettore .btn che è definito nel file bootstrap.min.css alla riga 1 e in cui (tra le altre proprietà) è definito border-radius: 3px;
Tra parentesi: tale file è minificato, per cui se andrai a modificarlo, vedrai tutto il codice css scritto di seguito in un'unica riga. Per cui non sarà semplice agire direttamente su quel file.
Sostanzialmente dovrai impostare border-radius: 50%; per fare in modo che quel rettangolo risulti completamente tondeggiante.
Nota: puoi eseguire delle prove al volo modificando direttamente (attraverso quel pannello) il valore di qualsiasi regola, nonché aggiungere/modificare selettori o proprietà come meglio credi. Per farlo, ti basterà fare doppio click su una qualsiasi proprietà, selettore, valore, e modificarli. Oppure usare lo strumento "+" in alto a quella scheda, per aggiungere un nuovo selettore (che in genere viene costruito in base all'elemento attualmente selezionato). Chiaro che si tratta di modifiche momentanee che vedrai solo tu mentre stai provando. Per ulteriori informazioni sull'uso degli strumenti di sviluppo ti invito a cercare le opportune documentazioni sul sito relativo al tuo browser. Puoi inoltre dare uno sguardo tra i link utili css (discussione in evidenza); al capitolo 5 (http://forum.html.it/forum/showthread.php?threadid=2933026&postid=25344229&viewfull=1#post25344229) puoi trovare vari riferimenti sotto la voce "Strumenti di sviluppo integrati nei browser".
Ora, se provi a modificare border-radius: 50%; noterai che le icone diventeranno ovali. Per farle esattamente tonde dovresti impostare l'altezza uguale alla larghezza, in modo che l'ingombro di quell'elemento sia esattamente quadrato.
Scorrendo poco più in alto, tra i selettori, puoi vedere .btn-social-icon dove, tra le altre, sono definite le proprietà
height: 34px;
width: 15%;
Puoi provare quindi a modificare i valori impostandoli, ad esempio, entrambi a 34px.
Questo, presumo, è ciò che vorresti ottenere.
Per rendere effettive le modifiche dovresti andare a modificare opportunamente i file css (con le impostazioni che hai provato).
Se non vuoi modificare i file originali, puoi comunque applicare le regole attraverso un tuo foglio di stile o uno style incluso nell'head della pagina, in modo che queste vadano a sovrascrivere le regole definite sugli altri file. Chiaro che vale il fattore "specificità" (per maggiori informazioni vedi capitolo 2 tra i link utili (http://forum.html.it/forum/showthread.php?threadid=2933026&postid=25344225&viewfull=1#post25344225)).
Potresti ad esempio usare una soluzione del genere:
a.btn-social-icon {
height: 34px;
width: 34px;
border-radius: 50%;
}
