Introducción a los Bootstrap Icons

Los Bootstrap Icons son los nuevos iconos de Bootstrap que vinieron a rremplazar los anteriores Glyphicons.

Los nuevos Bootstrap Icons cuentan con muchos mas iconos llegando a competir casi directamente con los iconos Font Awesome.

Los Bootstrap Icon son software libre por lo que lo podemos usar el proyectos gratis y comerciales sin problemas.

Instalación

Hay 3 formas de instalar los Bootstrap Icons.

• Usando el comando npm install bootstrap-icons
• Usando el CDN que esta en la pagina oficial
• Descargando los archivos fuente

En este caso vamos a descargar los archivos fuente desde la pagina oficial. (Links al final)

Una vez descargado tendremos un archivo .zip con todos los archivos fuente, lo que nos interesa es la carpeta font y el archivo bootstrap-icons.css el cual agregaremos a nuestro archivo HTML como css.

<link rel="stylesheet" type="text/css" href="icons/font/bootstrap-icons.css">

Ahora ya podemos hacer uso de los Bootstrap Icons que a fecha de este articulo esta en la version 1.7.0

Iconos

Los iconos son muchisimos y se pueden adaptar para cualquier proyecto, en la pagina oficial esta la lista de todos los iconos y el nombre de la clase para poder usarlo.

Cada cierto tiempo hay actualizaciones nuevas y agregan mas iconos.

Uso

Para usar los Bootstrap Icons, una vez que ya lo tenemos instalado y agregado solo debemos usar una etiqueta <i></i> con la clase “bi bi-nombre-del-icono”, por ejemplo.

<i class="bi bi-arrow-repeat"></i>

Y asi podemos agregar un icono y lo podemos colocar en cualquier lugar de nuestro sitio web, en botones, enlaces, textos, etc.

Enlaces

Ahora les dejo los enlaces.

Pagina oficial: https://icons.getbootstrap.com/

Ejemplo basico: https://drive.google.com/file/d/101Beo-RZgUpcSbag-dwgzUlR91ty5zfU/view

Seguimos programando…