13.2 — Bootstrap Icons & CDN

⏱️ TL;DR — Bootstrap ne contient pas d’icônes ; on ajoute la lib sœur Bootstrap Icons (~2000 icônes SVG), en font-icon (<i class="bi bi-heart">) ou en SVG. Côté diffusion, un CDN (jsDelivr) sert Bootstrap avec cache mondial et SRI ; en prod maîtrisée, on préfère souvent bundler soi-même.

🎯 Objectifs

Ajouter et utiliser Bootstrap Icons.
Choisir entre font-icons et SVG.
Peser CDN vs auto-hébergement.

Bootstrap Icons


<!-- CSS de la police d'icônes -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
 
<!-- utilisation -->
<i class="bi bi-heart-fill text-danger"></i>
<button class="btn btn-primary"><i class="bi bi-download"></i> Télécharger</button>

Les icônes héritent de la couleur du texte (currentColor) et se dimensionnent avec font-size — donc fs-*, text-* fonctionnent dessus.

En npm


npm install bootstrap-icons


import 'bootstrap-icons/font/bootstrap-icons.css'

Font-icon vs SVG

	Font-icon (`bi bi-*`)	SVG inline
Mise en place	1 `<link>`	copier le SVG
Poids	toute la police	seulement les icônes utilisées
Couleur/taille	`currentColor` / `font-size`	attributs SVG
Idéal	prototypage, usage large	prod optimisée, peu d’icônes

Pour la prod, l’SVG inline (ou un sprite) évite de charger ~2000 glyphes pour n’en utiliser que 10.

Accessibilité des icônes


<!-- icône décorative : cachée aux lecteurs d'écran -->
<i class="bi bi-star" aria-hidden="true"></i>
 
<!-- icône porteuse de sens : un label -->
<a href="/panier" aria-label="Panier"><i class="bi bi-cart" aria-hidden="true"></i></a>

CDN vs auto-hébergement

CDN (jsDelivr) : mise en cache mondiale, SRI, zéro hébergement. Idéal pour démos et sites simples.
Auto-hébergement / bundle : contrôle des versions, pas de dépendance tierce, meilleure intégration au pipeline (purge, hash de cache). Recommandé pour une app sérieuse.

⚠️ Piège — Charger toute la police Bootstrap Icons pour 3 icônes : c’est plusieurs centaines de ko inutiles. Pour peu d’icônes, préférez le SVG inline (copié depuis le site officiel).

💡 Pour un dev React — En React, une icône SVG devient un petit composant (<CartIcon />) que le bundler tree-shake. Des paquets comme react-bootstrap-icons exposent chaque icône en composant — plus propre que la font pour une app optimisée.

✏️ Exercices

Ajouter une icône de cœur rouge à un bouton.

✅ Solution

<button class="btn btn-light"><i class="bi bi-heart-fill text-danger"></i></button> (après avoir chargé le CSS des icônes).

Rendre accessible un lien « Panier » qui n’a qu’une icône.

✅ Solution

<a href="/panier" aria-label="Panier"><i class="bi bi-cart" aria-hidden="true"></i></a>.

🧠 Quiz de révision

1. Bootstrap inclut-il des icônes ?

Non — il faut la lib Bootstrap Icons (séparée).

2. Comment une font-icon prend-elle sa couleur ?

Via currentColor (donc text-* fonctionne).

3. Font-icon ou SVG pour peu d’icônes en prod ?

SVG inline (évite de charger toute la police).

4. Quel attribut sur une icône décorative ?

aria-hidden="true".

5. Avantage de l’auto-hébergement sur le CDN ?

Contrôle des versions, intégration au pipeline, pas de dépendance tierce.

Chapitre suivant : 13.3 — Migration & horizon Bootstrap 6