Alinear icono de material con texto en Materialise

Mantén la atención ya que en esta crónica vas a encontrar el hallazgo que buscas.Este tutorial fue probado por nuestros expertos para garantizar la calidad y veracidad de nuestro post.

Solución:

Tuve el mismo problema durante mucho tiempo, pero encontré una solución que funcionó para mí. Primero, asigne una clase personalizada al ícono que desea centrar. Luego, agregue una alineación vertical inferior y un tamaño de fuente que coincida o sea más pequeño que el texto al que se coloca al lado. Además, no especifique el tamaño del icono en el nombre de clase del icono. Hazme saber si esto funciona para ti.

CSS:

.inline-icon 
   vertical-align: bottom;
   font-size: 18px !important;

HTML:

"Your text goes here"warning

Esa es una forma de hacerlo. Por supuesto, depende del icono, tienes que encontrar el específico font-size que se ajuste a la altura del icono. Ejemplos:

#txt1
 font-size:28px;
 line-height:24px;

#txt2
 font-size:36px;
 line-height:24px;

#txt3
 font-size:21px;
 line-height:24px;

.material-icons
    display: inline-flex;
    vertical-align: top;

IDinfo_outline


IDsettings_cell


IDstay_primary_landscape

Simplemente ajuste el vertical-align: en valor negativo.

Código de muestra:

folder

Si guardas algún recelo y disposición de aclarar nuestro artículo eres capaz de añadir una disquisición y con gusto lo leeremos.

---

---

Utiliza Nuestro Buscador