Incorporar una imagen precediendo a un texto

Una de las posibilidades que existen para remarcar determinados párrafos es colocarle una pequeña imagen a la izquierda. Puede quedar bastante elegante. Encontré este truco en esta web,  donde ponen algunas variantes.
Para hacerlo, lo primero es eligir una imagen apropiada y 'fichar' su URL. Esto es fácil, bien porque la has buscado en Google o bien porque la has creado tu y la subes a Blogger, o a cualquier 'hosting' de imágenes, y puedes conocer su enlace con botón derecho ratón... Copiar la ruta de esta imagen. Voy a hacerlo usando la imagen de esa 'web-fuente'... aunque verás que no queda del todo bien, y habrá que tratar de mejorarlo...
Así que la forma estandar de hacer esto es insertar el siguiente código:
<p>
<img src="http://... (URL de la imagen)" alt="image"; />
aquí añades el texto o párrafo que quieras.
</p>
Te quedaría, por ejemplo, algo como esto:
Este es el resultado de un párrafo alineado, de forma estandar, con la imagen que hayas elegido
Como ves, se alinea abajo y, si puede quedar bien si la imagen es pequeña y cuadrada, pero si es 'alta y delgada', queda  regular.
Pero se puede hacer que el texto se alinee por ejemplo arriba, añadiendo al código de antes la 'orden'
style="vertical-align:top;"
o bien, si quieres que se alinee al medio, con la orden
style="vertical-align:top;"
Algo así...
<p>
<img src="http://... (URL de la imagen)" alt="image" style="vertical-align:top;" />aquí añades el texto o párrafo que quieras.
</p>
Y quedaría así
Y este es el resultado de un párrafo alineado 'arriba', con una imagen que hayas elegido. También se podría haber puesto style="vertical-align:middle;"
pero, como ves, solo queda bien para una sola línea. Lo cual significa que quizás sea mejor tener una imagen más bien 'cuadrada' y de un tamaño menor de 32x32 pixeles, para que las líneas no se separen excesivamente.

Mira este ejemplo...
Añadir una imagen a la izquierda del texto te puede servir para remarcar una información. La imagen tiene, en este caso, 20x20px, y así es como quedaría usando la alineación 'middle'

Pero aún se puede hacer mucho más fácil. ¿Quien no tiene alguna de esas fuentes de símbolos (Webdings o Wingdings, para los que usen Windows, o las que encuentres en el Mapa de Caracteres, si usas Linux? Pues es cuestión de elegir alguna de esas para iniciar el párrafo, te dejas de historias de añadir códigos... y además rtienes la ventaja de poderles asignar el color que quieras.
Cierto, estos signos están más limitados que si añades una imagen (la que quieras) pero... ¿No te podría servir algo como esto...?

▍ejemplo de signo
► ejemplo de signo
⦁ ejemplo de signo
✔ejemplo de signo
✽ ejemplo de signo
☛ ejemplo de signo
 
Así que esto de añadir una imagen (o un símbolo) al comienzo de un texto es un 'truquis' más que conviene 'fichar'.
Y perfeccionar, que no he quedado muy a gusto...

---

Imprimir el artículo/crear PDF
Volver al Indice del Blog

---