Wyrównanie pionowe tekstu i ikony w przycisku ładowania początkowego

Question

Mam problemy z wyrównaniem pionowym ikony font-awesome z tekstem w przycisku pod ramką programu startowego. Próbowałem tak wiele rzeczy, w tym ustawienie wysokości linii, ale nic nie działa.

<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/

Jak mogę uzyskać to działa ??

Answer 1

Istnieje jedna reguła ustawiona przez font-awesome.css, którą należy przesłonić.

Należy ustawić nadpisania w plikach CSS zamiast inline, ale w istocie, klasa ikona-ok jest ustawiony domyślnie vertical-align: baseline; i które mam poprawione tutaj:

<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> 

Przykład tutaj: http://jsfiddle.net/fPXFY/4/ i którego wyjście jest:

mam zmniejszono rozmiar czcionki ikony powyżej w tym przypadku do 30px, ponieważ czuje się zbyt duże w 40px dla rozmiaru przycisku, ale jest to wyłącznie osobisty punkt widzenia. można zwiększyć padding na przycisk, aby zrekompensować jeśli wymagane:

<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> 

Produkcja: http://jsfiddle.net/fPXFY/5/ którego wyjście jest: