Bootstrap icons, la bibliothèque d’icônes 100% Bootstrap.

Depuis plusieurs semaines Bootstrap propose une liste d’icônes propre au framework. Plus besoin d’utiliser une bibliothèque externe comme Font Awesome. À l’heure actuelle, plus de 500 icônes sont disponibles.

Posté le par Benoît Philibert|604 vues

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>
Tuto.com
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.com

Inté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


Ces articles pourraient vous intéresser

Tags

Commenter
Votre adresse email ne sera pas publiée. Champs obligatoire *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.