Allineamento verticale del testo e dell'icona nel pulsante di avvio

Question

Sto riscontrando problemi nell'allineamento verticale di un'icona impressionante di carattere con testo all'interno di un pulsante sotto il framework di bootstrap. Ho provato tante cose, tra cui l'impostazione dell'altezza della linea, ma nulla funziona.

<button id="edit-listing-form-house_Continue" 
     class="btn btn-large btn-primary" 
     style="" 
     value="" 
     name="Continue" 
     type="submit"> 
    Continue 
    <i class="icon-ok" style="font-size:40px;"></i> 
</button> 

http://jsfiddle.net/fPXFY/

Come posso ottenere questo lavoro ??

Answer 1

C'è una regola che è impostata da font-awesome.css, che è necessario sovrascrivere.

È necessario impostare le sostituzioni nei file CSS, piuttosto che in linea, ma in sostanza, la classe icone ok viene impostata a vertical-align: baseline; di default e che ho corretto qui:

<button id="whatever" class="btn btn-large btn-primary" name="Continue" type="submit"> 
    <span>Continue</span> 
    <i class="icon-ok" style="font-size:30px; vertical-align: middle;"></i> 
</button> 

Esempio qui: http://jsfiddle.net/fPXFY/4/ e l'uscita del quale è:

ho ridimensionato il font-size dell'icona sopra in questo caso a 30px, come ci si sente troppo grande a 40px per la dimensione del pulsante, ma questo è puramente un punto di vista personale. Si potrebbe aumentare l'imbottitura sul pulsante per compensare se necessario:

<button id="whaever" class="btn btn-large btn-primary" style="padding: 20px;" name="Continue" type="submit"> 
    <span>Continue</span> 
    <i class="icon-ok" style="font-size:30px; vertical-align: middle;"></i> 
</button> 

Produrre: http://jsfiddle.net/fPXFY/5/ l'uscita dei quali è: