Nota: Acá tienes un tutorial sencillo, de fácil aplicabilidad para trabajar con íconos de bootstrap 🙂
La URL es: https://icons.getbootstrap.com/#icon-font 👀
La URL anterior nos ofrece una librería muy interesante de íconos, además de muy amplia.
Para trabajar con esa librería, es necesario insertar el siguiente enlace: 👀
El procedimiento es muy sencillo, y se cumple en los tres siguientes pasos:
- Ir a la página https://icons.getbootstrap.com/
- Una vez en dicha página se da un clic sobre el ícono seleccionado.
- Luego, te direcciona a una página nueva donde te proporciona el html, y listo; muy fácil. 🙂
Tomando como ejemplo el ícono identificado con la denominación "alarm" y hecho lo antes expuesto para obtenerlo, se obtiene la siguiente imagen, en tamaño original:
#********************************************************************
#El html es el siguiente:
#********************************************************************
Esta librería nos ofrece la versatilidad de poder realizar ajustes sobre el html original. 🙂
En el caso de la imagen de ejemplo, le vamos a asignar color, y dar un mayor tamaño, para que se aprecie mejor, y, que depende de la necesidad de la publicación. Resulta lo siguiente:
#********************************************************************
#El html es el siguiente:
#********************************************************************
Veamos otros ejemplos.
Si queremos que nuestro ícono se ubique dentro de nuestra publicación, ajustamos el style conforme lo muestra el ejemplo que sigue a continuación:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
#********************************************************************
#El html es el siguiente:
#********************************************************************
Lo podemos ubicar también en el lado derecho:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laboredolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
#********************************************************************
#El html es el siguiente:
#********************************************************************
Podemos ademas dar al ícono un fondo (background) colorido, asignarle borde e incluso colocarle sombra. Veamos el ejemplo:
El html es el siguiente:
Otra funcionalidad interesante, es que se puede emplear como letra capital, es decir, que agranda la letra inicial, en virtud que dentro del html podemos colocar mensaje. En consecuencia, el mensaje añadido hereda las características del icono (color, tamaño, etc)
ransition. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
#********************************************************************
⁂
#El html es el siguiente:
#********************************************************************
