Depuis peu de temps la bibliothèque s’est de nouveau enrichi en passant de 200 à 500+ icônes utilisables et parfaitement dessinées pour s’intégrer aux composants Bootstrap.
Installation
Vous avez deux façons d’installer la bibliothèque d’icônes.
Pour les plus à l’aises vous pouvez passer par une commande npm :
npm install bootstrap-icons
Pour les autres, il vous suffit de télécharger les fichiers sources.
Utilisation
Une fois l’installation réussie, vous disposez de plusieurs méthodes de fonctionnement. Premièrement, il est possible d’utiliser la balise HTML <img> pour intégrer les icônes à votre site web.
<img src="/assets/img/bootstrap.svg" alt="" width="32" height="32" title="Bootstrap">
L’inconvénient principal de cette méthode étant le fait qu’on ne puisse pas personnaliser la couleur de l’icône. Cette dernière utilisant une balise <img> ne nous permet aucune modification de ce type.
La seconde méthode sera la plus utilisée et celle que je vous recommanderai pour plusieurs raisons. Tout d’abord, il vous sera cette fois-ci possible de personnaliser la couleur de votre icône. Ensuite, il sera également possible de modifier la taille de l’icône sans que celle-ci ne pixélise. Peu importe la taille, le rendu sera toujours net avec l’utilisation de balise <svg>.
<svg class="bi bi-check-box" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M15.354 2.646a.5.5 0 010 .708l-7 7a.5.5 0 01-.708 0l-3-3a.5.5 0 11.708-.708L8 9.293l6.646-6.647a.5.5 0 01.708 0z" clip-rule="evenodd"></path> <path fill-rule="evenodd" d="M1.5 13A1.5 1.5 0 003 14.5h10a1.5 1.5 0 001.5-1.5V8a.5.5 0 00-1 0v5a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5V3a.5.5 0 01.5-.5h8a.5.5 0 000-1H3A1.5 1.5 0 001.5 3v10z" clip-rule="evenodd"></path> </svg>
Il est important de noter que la balise <svg> englobe une ou plusieurs balises <path> qui représentent les différents dessins de l’icône.
Personnalisation
Modifier la couleur d’une icône
Adaptez la couleur de vos icônes avec la classe .text-*.
Retrouvez la liste des couleurs de bases utilisables dans Bootstrap. Pour rappel, rien ne vous oblige à utiliser d’autres couleurs en ajoutant de nouvelles classe dans vos CSS ou directement au sein des fichiers SASS du framework.
<svg class="bi bi-check-box" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M15.354 2.646a.5.5 0 010 .708l-7 7a.5.5 0 01-.708 0l-3-3a.5.5 0 11.708-.708L8 9.293l6.646-6.647a.5.5 0 01.708 0z" clip-rule="evenodd"></path> <path fill-rule="evenodd" d="M1.5 13A1.5 1.5 0 003 14.5h10a1.5 1.5 0 001.5-1.5V8a.5.5 0 00-1 0v5a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5V3a.5.5 0 01.5-.5h8a.5.5 0 000-1H3A1.5 1.5 0 001.5 3v10z" clip-rule="evenodd"></path> </svg>
Développez vos compétences digitales
Apprenez Bootstrap aux côtés d’experts et artistes passionnés sur tuto.com, une plateforme de formation au digital.
Visiter Tuto.comIntégrer des icônes directement dans vos fichiers CSS
Cette méthode vous permet de généraliser l’affichage d’une icône au sein de votre framework. Attention tout de même à bien suivre les directives recommandées par Bootstrap.
.bi::before {
display: inline-block;
content: "";
background-image: url("data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="%23333" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 14l6-6-6-6"></path></svg>");
background-repeat: no-repeat;
background-size: 1rem 1rem;
}
Ce que l’on peut espérer de Bootstrap
C’est un secret de polichinelle pour personne, l’arrivée de Bootstrap 5 se précise. On parle déjà d’une première version alpha en test pour un cercle restraint de développeurs.
Avec cette arrivée prochaine, Bootstrap prendra encore un peu plus son envole vers une version totalement indépendante (suppression de library jQuery par exemple). Bien entendu, Bootstrap Icons en fera parti. Rien ne nous empêche d’espérer plusieurs milliers d’icônes dans les mois à venir et une plus grande customisation avec un accès à la personnalisation encore plus simple de la part de Bootstrap.
L’avenir nous le dira 😉
Lien vers la bibliothèque d’icônes Bootstrap