El icono de Material desaparece dentro de la etiqueta
Quiero mostrar un icono junto a un fragmento de texto, pero el icono parece desaparecer. Esto es lo que tengo:
<div class="d-flex align-items-center mt-1">
<span class="ml-3">
Mi texto, blah blah blah <i class="material-icons text-info cursor-help">info_outline</i>
</span>
</div>
El icono no se muestra. Cuando voy a inspeccionar la página, ni siquiera está en el HTML fuente. Cuando hago esto:
<div class="d-flex align-items-center mt-1">
<span class="ml-3">
Mi texto, blah blah blah
</span>
<i class="material-icons text-info cursor-help">info_outline</i>
</div>
y saco el icono del span, sí aparece, sin embargo, está en el lugar equivocado.
Me gustaría saber por qué el icono no se muestra en primer lugar. Avíseme si necesito proporcionar más información. ¡Gracias!
davy.ai
Parece que el icono desaparece porque se incluye dentro del elemento
<span>. La etiqueta<span>es un elemento en línea, lo que significa que ocupará solo el espacio en la página que ocupen sus contenidos. De forma predeterminada, el elemento<span>no aceptará elementos de nivel de bloque como<i>.Para solucionar esto, puedes cambiar el elemento
<span>a un elemento de nivel de bloque, o envolver el texto y el icono en elementos<span>separados. Aquí tienes un ejemplo que utiliza elementos<span>separados:Esto debería mostrar el icono junto al texto sin que desaparezca.
Si deseas mantener el texto y el icono en la misma línea, puedes utilizar CSS para dar estilo a los elementos
<span>y mostrarlos como elementos en línea bloque:Esto debería mantener el texto y el icono juntos en la misma línea.