Allinea testo accanto a FontAwesome Icona

Ciao Ho problemi a cercare di allineare il testo accanto a un font icona fantastica Ho provato un paio di cose ma non sembra che funzionino quello che sto cercando di fare è creare un pannello con un pulsante su un lato che puoi cliccare e chiama il numero con l'icona fontawesome e il testo sull'altro lato del pannello (sto usando bootstrap v3.3.2 per costruirlo)Allinea testo accanto a FontAwesome Icona

Ecco un'immagine che ho quello che sto cercando di fare http://i.imgur.com/0yCsdyG.jpg

e qui l'immagine di quello che attualmente sembra http://i.imgur.com/UpMj6eJ.jpg

<div class="panel panel-default"> 
 
    <div class="panel-body"> 
 
    <div class="col-lg-8"> 
 
     <i class="fa fa-phone fa-2x" style="align: middle;"></i> 
 
     <h3>Call us</h3> 
 
    </div> 
 
    <div class="col-lg-4 text-center"> 
 
     <div class="btn-group btn-group-justified" style="align: middle;" role="group" aria-label="..."> 
 
     <div class="btn-group" role="group"> 
 
      <button type="button" class="btn btn-default" <a href="tel:">Click the button to call us</a> 
 
      </button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

fonte

2015-02-18 reece.78

Includi l'intero CSS, vedo che stai usando bootstrap .... 'h3' è un elemento di blocco stai cambiando? Come? – DaniP

@DanielPinzon Non esiste uno stile personalizzato per l'elemento h3, solo gli stili di boot propri –

Prova a replicare il tuo problema Non posso https://jsfiddle.net/n336Lnwf/ – DaniP

avere il controllo completo/indipendente sulla posizione, l'aspetto e le dimensioni dell'icona font-impressionante, provare qualcosa di simile qui di seguito.

Aggiungi position with un property value di relative allo stile h3 per controllare sovrapposizione.
Usa :after selettore content per inserire l'icona
Aggiungi position with un property value di absolute al h3: dopo il blocco di codice CSS
ottenere la posizione desiderata con sinistra, destra, in alto o in basso valori di proprietà.

h3 { 
 
    position: relative; /* Helps us control overlap */ 
 
    padding-left: 25px; /* Creates space for the Phone Icon */ 
 
    } 
 

 
h3:after { 
 
    content: '\f095'; 
 
    font-family: fontAwesome; 
 
    position: absolute; 
 
    left: 0; /* Adjust as needed */ 
 
    top: 3px; /* Adjust as needed */ 
 
    }

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<h3>Call us</h3>

Nota: È possibile regolare la dimensione dell'icona con i CSS font-size valore della proprietà.

fonte

2015-02-18 16:16:03

Prova questo:

<i class="fa fa-phone fa-2x" style="vertical-align: middle;"></i>

fonte

2015-02-18 15:58:14

No È ancora lo stesso, grazie per il tuo suggerimento –

Yup. È probabilmente un problema 'vertical-align'. Questo o è flottato e ha bisogno del galleggiante rimosso e 'display: inline' o' display: inline-block' aggiunto insieme all'allineamento verticale. Non usare però gli stili in linea. Questo è male. Demo della soluzione: http://jsfiddle.net/gcp3qbu4/ –

Utilizzare la classe .media.

fonte

2016-10-29 01:17:01 kjdion84

Ho provato questo, ma non mi piace molto perché sembra che sia stato progettato per prendere sempre la massima larghezza del suo contenitore genitore perché è stato progettato per cose come la foto accanto a commenti. Sebbene tu possa ovviamente impostare una larghezza, non è così facile quando hai a che fare con più lingue. Tuttavia, voterò perché è qualcosa di cui ero completamente inconsapevole e una buona funzionalità di Bootstrap. –

Per i posteri, se si è disposti ad andare con CSS flexbox, l'allineamento delle icone oltre al testo è banale.

Ho mantenuto Bootstrap e il relativo pannello come parte della soluzione nello spirito di rispondere alla domanda originale.

I punti chiave da notare qui sono:

display: flex fare figli diretti fluiscono nella direzione di default (riga)
align-items: center per allineare lungo la direzione flex (allineamento verticale in questo caso)
flex: 1 per ottenere la sezione centrale di ampliare il più possibile, spingendo i due lati a parte

.banner { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.banner-start h3 { 
 
    display: inline-block; 
 
} 
 

 
.banner-start i { 
 
    padding: 0 6px; 
 
} 
 

 
.banner-middle { 
 
    flex: 1; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="panel panel-default"> 
 
    <div class="panel-body"> 
 
    <div class="banner"> 
 
     <div class="banner-start"> 
 
     <i class="fa fa-phone fa-2x"></i> 
 
     <h3>Call us</h3> 
 
     </div> 
 
     <div class="banner-middle"> 
 

 
     </div> 
 
     <div class="banner-end"> 
 
     <div class="btn-group" role="group"> 
 
      <button type="button" class="btn btn-default"><a href="tel:">Click the button to call us</a> 
 
      </button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

fonte

2017-08-26 20:12:00

C'è un modo molto semplice se il vostro fontawesome ha lo stesso font-size che il testo (di solito è la buona pratica), includono i tag nei tag di testo:

<p> 
    <i class="fa fa-check"></i> 
Text text text 
</p>

fonte

2017-10-10 09:17:38

Allinea testo accanto a FontAwesome Icona

risposta

Problemi correlati