twitter-bootstrap - navegacion - bootstrap 4 boton a la derecha

Alineación vertical del texto y el icono en el botón de arranque

Question

Tengo problemas para alinear verticalmente un ícono impresionante de fuente con texto dentro de un botón debajo del marco de arranque. He intentado tantas cosas, incluida la configuración de la altura de la línea, pero nada está funcionando.

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

¿Cómo puedo hacer que esto funcione?

Answer 1

Hay una regla establecida por font-awesome.css , que debe sobrescribir.

Debe establecer anulaciones en sus archivos CSS en lugar de hacerlo en línea, pero esencialmente, la clase icon-ok se está configurando en vertical-align: baseline; por defecto y que he corregido aquí:

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

Ejemplo aquí: http://jsfiddle.net/fPXFY/4/ y el resultado de esto es:

Reduje el tamaño de fuente del ícono de arriba en esta instancia a 30px , ya que se siente demasiado grande a 40px para el tamaño del botón, pero esto es puramente un punto de vista personal. Puede aumentar el relleno en el botón para compensar si es necesario:

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

Producir: http://jsfiddle.net/fPXFY/5/ cuyo resultado es: