Comment intégrer Bootstrap Icons dans un projet ?

Trois méthodes : via CDN (lien CSS dans <head> depuis cdn.jsdelivr.net/npm/bootstrap-icons), via npm (npm install bootstrap-icons puis import dans CSS/JS), ou en SVG inline. Utilisez ensuite la classe bi bi-nom-icone sur un élément <i> ou <span>. La taille se contrôle avec font-size en CSS, et la couleur avec color ou la classe text-*.

Combien d'icônes contient Bootstrap Icons et comment les chercher ?

Bootstrap Icons compte plus de 1900 icônes au format SVG optimisé (version 1.11+). Pour les chercher, utilisez le site officiel icons.getbootstrap.com avec le moteur de recherche intégré. Chaque icône est disponible en plusieurs formats : classe CSS, SVG inline, et sprite SVG. Toutes les icônes sont open source (licence MIT).

Quelle est la différence entre Bootstrap Icons, Font Awesome et Material Icons ?

Bootstrap Icons : ~1900 icônes, SVG-first, intégration naturelle avec Bootstrap 5, licence MIT. Font Awesome : ~7000 icônes dont une partie payante (Pro), le plus populaire. Material Icons : ~2500 icônes Google, style Material Design. Bootstrap Icons est le choix évident si vous utilisez déjà Bootstrap 5, car le style est cohérent et le tout est gratuit.

Peut-on changer la taille et la couleur des Bootstrap Icons ?

Oui, facilement. La taille se contrôle avec font-size (ex: style="font-size: 2rem") ou les classes Bootstrap fs-1 à fs-6. La couleur se contrôle avec color en CSS ou les classes text-primary, text-success, text-danger, etc. Pour les SVG inline, utilisez fill="currentColor" et changez la couleur du parent. Pas besoin de CSS personnalisé dans la plupart des cas.

Bootstrap Icons : icônes minimalistes et complètes

Présentation et écosystème

Bootstrap Icons est la bibliothèque d'icônes officielle du framework Bootstrap. Lancée avec Bootstrap 5, elle fonctionne en totale autonomie : elle ne requiert pas Bootstrap pour fonctionner. Avec plus de 2000 icônes en SVG pur, elle couvre l'ensemble des besoins d'une interface web moderne.

La philosophie de Bootstrap Icons est le minimalisme cohérent : chaque icône respecte les mêmes règles de grille (16×16 viewBox), de stroke et de style visuel. Résultat : elles s'intègrent naturellement dans tout projet Bootstrap sans décalage visuel.

Pourquoi Bootstrap Icons plutôt qu'une autre librairie ?

Critère	Bootstrap Icons	Font Awesome	Feather Icons
Nombre d'icônes	2000+	2000+ (free) / 26000+ (Pro)	287
Formats	SVG + Font	SVG + Font	SVG only
Poids CDN	~45 KB (font)	~120 KB (font)	~26 KB (JS)
Licence	MIT	Free: CC BY 4.0	MIT
Dark mode natif	Via currentColor	Via currentColor	Via currentColor
Cohérence style	★★★★★	★★★★☆	★★★★★
Variantes (solid/outline)	Oui (suffixes)	Oui (-regular/-solid/-light)	Non (outline only)

Recommandation : Bootstrap Icons est le meilleur choix pour un projet Bootstrap. Si votre projet n'utilise pas Bootstrap, Tabler Icons ou Heroicons offrent une meilleure couverture cross-framework.

Installation et intégration CDN / NPM

Via CDN (méthode la plus rapide)

<!-- Dans <head> — dernière version stable -->
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

Via NPM (recommandé pour les projets modulaires)

# Installation
npm install bootstrap-icons

# Yarn
yarn add bootstrap-icons

/* Dans votre fichier CSS/SCSS principal */
@import "bootstrap-icons/font/bootstrap-icons.css";

/* Ou en SCSS — accès aux variables Sass */
@import "~bootstrap-icons/font/bootstrap-icons";

/* Dans un bundler (Vite, Webpack) */
import 'bootstrap-icons/font/bootstrap-icons.css';

SVG individuels — import à la demande

/* Accès direct aux SVG (zero CSS) */
/* node_modules/bootstrap-icons/icons/heart-fill.svg */

/* Webpack/Vite : inline SVG */
import HeartIcon from 'bootstrap-icons/icons/heart-fill.svg?raw';

/* Usage dans un template */
const template = `
  <span class="icon">${HeartIcon}</span>
`;

3 formats : web font, SVG inline, SVG sprite

1. Web font (CSS class) — le plus simple

<!-- Syntaxe : bi bi-{nom-icone} -->
<i class="bi bi-heart"></i>
<i class="bi bi-heart-fill"></i>       <!-- variante remplie -->
<i class="bi bi-star"></i>
<i class="bi bi-star-fill"></i>

<!-- Dans un bouton -->
<button class="btn btn-primary">
    <i class="bi bi-download me-2"></i>
    Télécharger
</button>

<!-- Dans une navbar -->
<a href="/cart" class="btn btn-outline-light position-relative">
    <i class="bi bi-cart3"></i>
    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
        3
    </span>
</a>

2. SVG inline — contrôle total

<!-- SVG inline pour un contrôle fin des styles -->
<svg xmlns="http://www.w3.org/2000/svg"
     width="24" height="24"
     fill="currentColor"
     class="bi bi-check2-square text-success"
     viewBox="0 0 16 16">
    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</svg>

3. SVG sprite — bundle d'icônes

<!-- Créer un sprite SVG centralisé (dans votre HTML ou un fichier séparé) -->
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
    <symbol id="icon-home" viewBox="0 0 16 16">
        <path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5v-5h3v5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146z"/>
    </symbol>
    <symbol id="icon-gear" viewBox="0 0 16 16">
        <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/>
        <path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.892 3.433-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.892-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.474l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"/>
    </symbol>
</svg>

<!-- Utilisation du sprite -->
<svg width="24" height="24" aria-hidden="true">
    <use href="#icon-home"></use>
</svg>
<svg width="24" height="24" aria-hidden="true">
    <use href="#icon-gear"></use>
</svg>

Format	Avantages	Inconvénients	Cas d'usage
Web font	Rapide, simple, anti-aliasing natif	Font request HTTP, pas de multicolor	Projets Bootstrap classiques
SVG inline	Contrôle total, animations CSS	HTML verbeux, pas mis en cache	Icônes dynamiques, animations
SVG sprite	Cacheable, un seul fichier	Setup initial	Apps avec beaucoup d'icônes

Catalogue par catégories

Bootstrap Icons couvre toutes les catégories d'une interface moderne. Voici les icônes les plus utilisées par domaine.

Catégorie	Icônes populaires	Syntaxe
Navigation	Maison, menu, flèches, chevrons	`bi-house`, `bi-list`, `bi-arrow-left`, `bi-chevron-right`
Actions	Modifier, supprimer, sauvegarder	`bi-pencil`, `bi-trash`, `bi-floppy`, `bi-plus-lg`
Médias	Lecture, pause, volume, caméra	`bi-play-fill`, `bi-pause`, `bi-volume-up`, `bi-camera`
Communication	Email, chat, notifications, partage	`bi-envelope`, `bi-chat-dots`, `bi-bell`, `bi-share`
Formulaires	Recherche, filtre, case à cocher	`bi-search`, `bi-funnel`, `bi-check-square`
Etat / feedback	Succès, erreur, info, avertissement	`bi-check-circle`, `bi-x-circle`, `bi-info-circle`, `bi-exclamation-triangle`
Fichiers	Documents, téléchargement, upload	`bi-file-earmark`, `bi-download`, `bi-upload`, `bi-folder`
Social	Réseaux sociaux, like, partage	`bi-github`, `bi-linkedin`, `bi-twitter-x`, `bi-heart`

Variantes fill vs outline

<!-- Bootstrap Icons utilise un suffixe -fill pour les variantes remplies -->

<!-- Outline (par défaut) -->
<i class="bi bi-heart"></i>
<i class="bi bi-star"></i>
<i class="bi bi-bookmark"></i>
<i class="bi bi-bell"></i>

<!-- Fill (rempli) -->
<i class="bi bi-heart-fill text-danger"></i>
<i class="bi bi-star-fill text-warning"></i>
<i class="bi bi-bookmark-fill text-primary"></i>
<i class="bi bi-bell-fill text-info"></i>

<!-- Half fill (semi-rempli — notation avec -half) -->
<i class="bi bi-star-half text-warning"></i>

<!-- Pattern toggle favori -->
<button class="btn btn-sm btn-link p-0" id="btn-favorite">
    <i class="bi bi-heart" id="heart-icon"></i>
</button>

<script>
document.getElementById('btn-favorite').addEventListener('click', function() {
    const icon = document.getElementById('heart-icon');
    icon.classList.toggle('bi-heart');
    icon.classList.toggle('bi-heart-fill');
    icon.classList.toggle('text-danger');
});
</script>

Personnalisation : taille, couleur, animation

Contrôle de la taille

<!-- Via font-size CSS -->
<i class="bi bi-star-fill" style="font-size: 1rem;"></i>   <!-- 16px -->
<i class="bi bi-star-fill" style="font-size: 1.5rem;"></i>  <!-- 24px -->
<i class="bi bi-star-fill" style="font-size: 2rem;"></i>   <!-- 32px -->
<i class="bi bi-star-fill" style="font-size: 3rem;"></i>   <!-- 48px -->

<!-- Mieux : classes CSS dédiées -->
<i class="bi bi-star-fill icon-sm"></i>   <!-- 1rem -->
<i class="bi bi-star-fill icon-md"></i>   <!-- 1.5rem -->
<i class="bi bi-star-fill icon-lg"></i>   <!-- 2rem -->
<i class="bi bi-star-fill icon-xl"></i>   <!-- 3rem -->

/* Système de tailles cohérent */
.icon-xs { font-size: 0.75rem; }
.icon-sm { font-size: 1rem; }
.icon-md { font-size: 1.5rem; }
.icon-lg { font-size: 2rem; }
.icon-xl { font-size: 3rem; }
.icon-2xl { font-size: 4rem; }

Animations CSS

/* Rotation continue (loader) */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.icon-spin {
    display: inline-block;
    animation: spin 1s linear infinite;
}

/* Pulse (notification) */
@keyframes pulse-scale {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.icon-pulse {
    animation: pulse-scale 1.5s ease-in-out infinite;
}

/* Bounce (download) */
@keyframes bounce-down {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}

.icon-bounce {
    animation: bounce-down 0.8s ease-in-out infinite;
}

/* Shake (erreur) */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

.icon-shake {
    animation: shake 0.5s ease;
}

<!-- Usage des animations -->
<i class="bi bi-arrow-clockwise icon-spin text-primary"></i>   <!-- Chargement -->
<i class="bi bi-bell-fill icon-pulse text-warning"></i>         <!-- Notification -->
<i class="bi bi-download icon-bounce text-success"></i>         <!-- Téléchargement -->
<i class="bi bi-exclamation-triangle icon-shake text-danger"></i> <!-- Erreur -->

Support du dark mode

Bootstrap Icons héritent de la couleur CSS courante via currentColor. Si vous changez la couleur du texte parent, l'icône suit automatiquement.

/* Les icônes Bootstrap utilisent fill="currentColor" en SVG inline */
/* ou color en CSS pour la web font */

/* Thème clair */
:root {
    --icon-color: #212529;
    --icon-muted: #6c757d;
    --icon-primary: #0d6efd;
}

/* Thème sombre */
[data-theme="dark"],
@media (prefers-color-scheme: dark) {
    :root {
        --icon-color: #f8f9fa;
        --icon-muted: #adb5bd;
        --icon-primary: #6ea8fe;
    }
}

/* Application */
.icon-default { color: var(--icon-color); }
.icon-muted { color: var(--icon-muted); }
.icon-primary { color: var(--icon-primary); }

<!-- Les icônes s'adaptent automatiquement au thème via currentColor -->
<div class="card bg-body text-body">
    <div class="card-body">
        <i class="bi bi-moon-stars-fill"></i>  <!-- couleur héritée du texte -->
        <i class="bi bi-sun-fill text-warning"></i>  <!-- couleur fixe -->
    </div>
</div>

<!-- Toggle dark mode avec changement d'icône -->
<button class="btn btn-outline-secondary" id="theme-toggle">
    <i class="bi bi-sun-fill" id="theme-icon"></i>
</button>

<script>
const btn = document.getElementById('theme-toggle');
const icon = document.getElementById('theme-icon');
const html = document.documentElement;

btn.addEventListener('click', () => {
    const isDark = html.getAttribute('data-bs-theme') === 'dark';
    html.setAttribute('data-bs-theme', isDark ? 'light' : 'dark');
    icon.className = isDark ? 'bi bi-sun-fill' : 'bi bi-moon-fill';
});
</script>

Intégration Angular

Dans un projet Angular, Bootstrap Icons s'intègre via NPM + import CSS global, avec la possibilité de créer un composant réutilisable.

// Installation
// npm install bootstrap-icons

// styles.scss ou main.scss
@import "bootstrap-icons/font/bootstrap-icons.css";

// Ou dans angular.json
{
  "styles": [
    "node_modules/bootstrap-icons/font/bootstrap-icons.css",
    "src/styles.scss"
  ]
}

// icon.component.ts — composant générique pour les icônes
import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
    selector: 'app-icon',
    standalone: true,
    imports: [CommonModule],
    template: `
        <i [class]="'bi bi-' + name + ' ' + extraClasses"
           [style.font-size]="size"
           [attr.aria-hidden]="!ariaLabel"
           [attr.aria-label]="ariaLabel">
        </i>
    `
})
export class IconComponent {
    @Input({ required: true }) name!: string;
    @Input() size = '1rem';
    @Input() extraClasses = '';
    @Input() ariaLabel?: string;
}

// Utilisation dans les templates
// <app-icon name="heart-fill" size="1.5rem" extraClasses="text-danger" />
// <app-icon name="download" size="2rem" extraClasses="text-primary" ariaLabel="Télécharger" />

// Exemple dans une card Angular avec icônes dynamiques
@Component({
    selector: 'app-stat-card',
    standalone: true,
    imports: [CommonModule, IconComponent],
    template: `
        <div class="card">
            <div class="card-body d-flex align-items-center gap-3">
                <app-icon
                    [name]="icon"
                    size="2.5rem"
                    [extraClasses]="'text-' + color"
                />
                <div>
                    <p class="text-muted mb-0 small">{{ label }}</p>
                    <h3 class="mb-0">{{ value }}</h3>
                    <small [class]="trend >= 0 ? 'text-success' : 'text-danger'">
                        <app-icon [name]="trend >= 0 ? 'arrow-up' : 'arrow-down'" />
                        {{ Math.abs(trend) }}%
                    </small>
                </div>
            </div>
        </div>
    `
})
export class StatCardComponent {
    protected Math = Math;
    @Input({ required: true }) icon!: string;
    @Input({ required: true }) label!: string;
    @Input({ required: true }) value!: string | number;
    @Input() color = 'primary';
    @Input() trend = 0;
}

Intégration React

// Installation
// npm install bootstrap-icons

// Dans votre point d'entrée (main.tsx ou App.tsx)
import 'bootstrap-icons/font/bootstrap-icons.css';

// Composant Icon réutilisable
interface IconProps {
    name: string;
    size?: string;
    className?: string;
    'aria-label'?: string;
}

function Icon({ name, size = '1rem', className = '', 'aria-label': ariaLabel }: IconProps) {
    return (
        <i
            className={`bi bi-${name} ${className}`}
            style={{ fontSize: size }}
            aria-hidden={!ariaLabel}
            aria-label={ariaLabel}
        />
    );
}

// Usage
function App() {
    const [liked, setLiked] = useState(false);

    return (
        <div>
            <!-- Icônes simples -->
            <Icon name="house" size="1.5rem" className="text-primary" />

            <!-- Toggle like -->
            <button
                onClick={() => setLiked(!liked)}
                className="btn btn-link p-0"
                aria-label={liked ? 'Retirer des favoris' : 'Ajouter aux favoris'}
            >
                <Icon
                    name={liked ? 'heart-fill' : 'heart'}
                    size="1.5rem"
                    className={liked ? 'text-danger' : 'text-muted'}
                />
            </button>

            <!-- Dans une liste d'actions -->
            <div className="d-flex gap-2">
                <button className="btn btn-outline-primary btn-sm">
                    <Icon name="pencil" className="me-1" /> Modifier
                </button>
                <button className="btn btn-outline-danger btn-sm">
                    <Icon name="trash" className="me-1" /> Supprimer
                </button>
            </div>
        </div>
    );
}

Accessibilité et bonnes pratiques

Les icônes peuvent être décorationnelles (cachées aux lecteurs d'écran) ou fonctionnelles (nécessitant un label alternatif). La distinction est cruciale pour l'accessibilité.

<!-- ❌ MAUVAIS : icône sans texte accessible -->
<button><i class="bi bi-trash"></i></button>

<!-- ✅ BON : icône décorative avec texte visible -->
<button class="btn btn-danger">
    <i class="bi bi-trash me-2" aria-hidden="true"></i>
    Supprimer
</button>

<!-- ✅ BON : icône seule avec aria-label sur le bouton -->
<button class="btn btn-danger btn-sm" aria-label="Supprimer l'article">
    <i class="bi bi-trash" aria-hidden="true"></i>
</button>

<!-- ✅ BON : icône avec texte masqué visuellement -->
<button class="btn btn-link">
    <i class="bi bi-share" aria-hidden="true"></i>
    <span class="visually-hidden">Partager cet article</span>
</button>

<!-- ✅ BON : icône SVG avec title -->
<svg role="img" aria-labelledby="title-home" width="24" height="24">
    <title id="title-home">Aller à l'accueil</title>
    <use href="#icon-home"></use>
</svg>

Ajoutez aria-hidden="true" sur toute icône décorative (accompagnant du texte)
Utilisez aria-label sur le bouton parent pour les icônes seules
Ou utilisez <span class="visually-hidden"> pour un texte visible aux lecteurs d'écran
Assurez un ratio de contraste suffisant entre l'icône et son fond (WCAG AA = 4.5:1)
Ne vous reposez pas sur la couleur seule pour transmettre un état (ajoutez texte ou icône)
Testez avec NVDA (Windows) ou VoiceOver (Mac) pour vérifier la lecture

Comparaison : Bootstrap Icons vs Font Awesome, Feather, Tabler

Librairie	Icônes	Style	Poids	Prix	Idéal pour
Bootstrap Icons	2000+	Outline / Fill	~45 KB	Gratuit	Projets Bootstrap
Font Awesome Free	~2000	Solid / Regular / Brands	~120 KB	Gratuit	Projets génériques
Font Awesome Pro	26000+	6 variantes	Variable	$99–$299/an	Produits commerciaux
Feather Icons	287	Outline uniquement	~26 KB JS	Gratuit	Minimalisme, dashboards
Tabler Icons	5000+	Outline / Fill	~30 KB (subset)	Gratuit	Dashboards B2B
Heroicons	292	Outline / Solid / Mini	Petit (SVG)	Gratuit	Tailwind CSS
Lucide Icons	1400+	Outline uniquement	Variable	Gratuit	React, Vue, Svelte

Quand choisir Bootstrap Icons

Votre projet utilise Bootstrap 4 ou 5 → cohérence visuelle naturelle
Vous avez besoin d'icônes fill ET outline → les deux variantes sont disponibles
Vous voulez une intégration CDN ultra-simple → une seule ligne de CSS
Performance mobile importante → 45 KB vs 120 KB pour Font Awesome
Vous construisez un dashboard admin → couverture suffisante pour tous les cas

Alternative : Si vous migrez vers Tailwind CSS, préférez Heroicons. Si vous êtes sur un projet sans framework CSS, Tabler Icons offre plus de choix (5000+ icônes) avec un style professionnel.

Conclusion

Bootstrap Icons est une solution mature, légère et parfaitement intégrée à l'écosystème Bootstrap. Avec 2000+ icônes en SVG, les trois formats d'intégration (font, SVG inline, sprite), et le support natif du dark mode via currentColor, elle couvre 95% des besoins d'une application web moderne.

Pour Angular et React, un composant Icon générique paramétré par nom d'icône est la meilleure approche : il centralise les décisions de taille, d'accessibilité et de couleur, et réduit la verbosité dans vos templates.

- Bootstrap Icons : icônes minimalistes et complètes

Présentation et écosystème

Pourquoi Bootstrap Icons plutôt qu'une autre librairie ?

Installation et intégration CDN / NPM

Via CDN (méthode la plus rapide)

Via NPM (recommandé pour les projets modulaires)

SVG individuels — import à la demande

3 formats : web font, SVG inline, SVG sprite

1. Web font (CSS class) — le plus simple

2. SVG inline — contrôle total

3. SVG sprite — bundle d'icônes

Catalogue par catégories

Variantes fill vs outline

Personnalisation : taille, couleur, animation

Contrôle de la taille

Animations CSS

Support du dark mode

Intégration Angular

Intégration React

Accessibilité et bonnes pratiques

Comparaison : Bootstrap Icons vs Font Awesome, Feather, Tabler

Quand choisir Bootstrap Icons

Conclusion

Explorer par mot clé

Présentation et écosystème

Pourquoi Bootstrap Icons plutôt qu'une autre librairie ?

Installation et intégration CDN / NPM

Via CDN (méthode la plus rapide)

Via NPM (recommandé pour les projets modulaires)

SVG individuels — import à la demande

3 formats : web font, SVG inline, SVG sprite

1. Web font (CSS class) — le plus simple

2. SVG inline — contrôle total

3. SVG sprite — bundle d'icônes

Catalogue par catégories

Variantes fill vs outline

Personnalisation : taille, couleur, animation

Contrôle de la taille

Animations CSS

Support du dark mode

Intégration Angular

Intégration React

Accessibilité et bonnes pratiques

Comparaison : Bootstrap Icons vs Font Awesome, Feather, Tabler

Quand choisir Bootstrap Icons

Conclusion

Partager

Voir aussi

Explorer par mot clé