Bootstrap Icons : icônes minimalistes et complètes

Introduction et présentation

Bootstrap Icons est la bibliothèque d'icônes officielle de Bootstrap. Légère, minimaliste et parfaitement intégrée avec Bootstrap.

Avantages :

• Léger et minimaliste (~1.3 MB CDN)
• Design cohérent avec Bootstrap
• Parfait pour les dashboards et applications
• Icônes en formats SVG et web font
• 1300+ icônes complètes et cohérentes

Installation et setup

CDN :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">

NPM :

npm install bootstrap-icons

// Dans votre CSS
import 'bootstrap-icons/font/bootstrap-icons.css';

SVG directement :

node_modules/bootstrap-icons/icons/heart.svg

Utilisation basique

Web Font :

<i class="bi bi-heart"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-download"></i>

SVG inline :

<svg xmlns="http://www.w3.org/2000/svg" class="bi bi-heart" width="16" height="16" viewBox="0 0 16 16">
  <path d="m8 2.748-.717-.737C5.956 2.017 3.868.72.737 2.817c-1.2.9-1.565 2.812-.435 4.568.92 1.999 2.839 3.12 5.007 3.607.659.122 1.221.337 1.691.615.47-.278 1.032-.493 1.691-.615 2.168-.487 4.086-1.608 5.007-3.607 1.13-1.756.765-3.668-.435-4.568-3.13-2.097-5.218-.82-6.935.737-.81.741-1.51 1.456-1.753 1.753zm2.506 5.68c.533-1.479.645-2.783.148-3.592-.505-.803-1.557-1.438-2.654-1.438-1.097 0-2.15.635-2.654 1.438-.497.809-.386 2.113.147 3.592.54 1.486 1.18 2.807 1.852 3.773.675.968 1.645 2.237 2.654 2.237s1.979-1.269 2.654-2.237c.672-.966 1.311-2.287 1.852-3.773z"/>
</svg>

Customisation

Taille :

<i class="bi bi-heart" style="font-size: 12px;"></i>    <!-- Small -->
<i class="bi bi-heart" style="font-size: 24px;"></i>    <!-- Medium -->
<i class="bi bi-heart" style="font-size: 48px;"></i>    <!-- Large -->

Couleurs et animations :

.icon-animated {
    color: #dc3545;
    transition: all 0.3s ease;
}

.icon-animated:hover {
    transform: scale(1.3);
    filter: drop-shadow(0 0 2px rgba(220, 53, 69, 0.5));
}

Intégration avec frameworks

Angular :

<!-- template.html -->
<button class="btn btn-primary">
    <i class="bi bi-download"></i>
    Télécharger
</button>

React :

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

function MyButton() {
  return (
    <button className="btn btn-primary">
      <i className="bi bi-download"></i>
      Télécharger
    </button>
  )
}

Bootstrap components :

<!-- Navbar avec icônes -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <i class="bi bi-house"></i> Home
  </a>
</nav>

Cas d'usage et exemples

Tableau de données :

<table class="table">
  <tr>
    <td><i class="bi bi-pencil-square"></i></td>
    <td><i class="bi bi-trash"></i></td>
  </tr>
</table>

Badge avec icônes :

<span class="badge bg-danger">
  <i class="bi bi-exclamation-circle"></i>
  5 Alertes
</span>

Comparaison et bonnes pratiques

Cas d'usage :

• ✅ Projets Bootstrap
• ✅ Dashboards et admin panels
• ✅ Minimalisme recherché
• ❌ Projets sans Bootstrap
• ❌ Besoin de très nombreuses icônes

Avantages :

• Légèreté et performance
• Style cohérent avec Bootstrap
• Documentation excellente

Inconvénients :

• Moins d'icônes que Font Awesome
• Dépendance à Bootstrap