Como personalizar los Bootstrap Icons con CSS

Los bootstrap icons al ser iconos basados en Fuentes, se pueden personalizar como si fueran texto, para ello podemos usar los atributos de CSS.

Ademas de lpoder personalizar los iconos con CSS es posible que los iconos hereden el estilo del contenedor padre.

Es decir si están en un bloque donde el texto este de 50px y texto color azul, los iconos también van a tener el mismo estilo del contenedor.

Ejemplos

A continuación algunos ejemplos:

Los iconos tendrán el mismo estilo que la etiqueta H1.

<h1><i class="bi bi-lightning"></i> Personalizar Bootstrap Icons con CSS</h1>

Iconos en un párrafo con tamaño 100px con diferentes colores.

<p style="font-size: 100px;"><i class="bi bi-arrow-repeat"></i> <span style=" color: yellow;"><i class="bi bi-life-preserver"></i></span></p>

Iconos tamaño 100px color rojo.

<span style="font-size: 100px; color: red;"><i class="bi bi-apple"></i></span>

Iconos tamaño 200px , color azul.

<span style="font-size: 200px; color: blue;"><i class="bi bi-alarm"></i></span>

Iconos tamaño 100px, color morado.

<span style="font-size: 100px; color: purple; "><i class="bi bi-lightbulb"></i></span>

Este es el resultado al ejecutar los ejemplos.

Vale la pena jugar con los diferentes iconos y estilos, se pueden obtener resultados geniales.