Icônes

Bibliothèque d'icônes Font Awesome 6 pour enrichir votre interface.

À propos de Font Awesome

Le CCB Design System V2 utilise Font Awesome 6 (gratuit) pour les icônes. Plus de 2,000 icônes vectorielles sont disponibles.

Voir toutes les icônes Font Awesome

Styles d'Icônes

Solid (fas)

.fas .fa-home

Style par défaut, plein

Regular (far)

.far .fa-heart

Style contour

Brands (fab)

.fab .fa-github

Logos de marques

Tailles d'Icônes

.fa-xs

.fa-sm

Normal

.fa-lg

.fa-xl

.fa-2x

.fa-3x

<i class="fas fa-star fa-lg"></i>
<i class="fas fa-star fa-2x"></i>
<i class="fas fa-star fa-3x"></i>

Couleurs d'Icônes

.text-primary

.text-secondary

.text-success

.text-warning

.text-danger

.text-info

.text-muted

<i class="fas fa-heart text-danger"></i>
<i class="fas fa-check text-success"></i>

Icônes Courantes par Catégorie

Interface & Navigation

fa-home
fa-search
fa-bars
fa-cog
fa-user
fa-bell
fa-envelope
fa-download
fa-upload
fa-filter
fa-ellipsis-v
fa-th

Actions

fa-plus
fa-edit
fa-trash
fa-save
fa-copy
fa-share
fa-print
fa-redo
fa-undo
fa-sync
fa-lock
fa-unlock

Statuts & Alertes

fa-check-circle
fa-times-circle
fa-exclamation-circle
fa-info-circle
fa-question-circle
fa-exclamation-triangle
fa-ban
fa-spinner fa-spin
fa-circle-notch fa-spin
fa-hourglass-half
fa-clock
fa-thumbs-up

Fichiers & Documents

fa-file
fa-file-pdf
fa-file-word
fa-file-excel
fa-file-image
fa-file-archive
fa-folder
fa-folder-open
fa-cloud-upload-alt
fa-cloud-download-alt
fa-paperclip
fa-link

Business & Finance

fa-building
fa-briefcase
fa-chart-line
fa-chart-bar
fa-chart-pie
fa-dollar-sign
fa-euro-sign
fa-credit-card
fa-wallet
fa-receipt
fa-calculator
fa-handshake

Utilisateurs & Personnes

fa-user
fa-users
fa-user-circle
fa-user-tie
fa-user-shield
fa-user-cog
fa-user-plus
fa-user-minus
fa-id-card
fa-address-card
fa-user-check
fa-user-times

Communication

fa-envelope
fa-comment
fa-comments
fa-phone
fa-phone-alt
fa-video
fa-inbox
fa-paper-plane
fa-at
fa-hashtag
fa-rss
fa-wifi

Utilisation

Syntaxe de Base

<i class="fas fa-star"></i>
<i class="far fa-heart"></i>
<i class="fab fa-github"></i>

Avec Taille et Couleur

<i class="fas fa-check-circle fa-2x text-success"></i>
<i class="fas fa-times fa-lg text-danger"></i>

Dans un Bouton

<button class="btn btn-primary">
    <i class="fas fa-save"></i> Enregistrer
</button>

Animation

<i class="fas fa-sync fa-spin"></i>
<i class="fas fa-spinner fa-pulse"></i>

Bonnes Pratiques

Conseils pour les icônes
  • Utilisez des icônes pour renforcer le sens, pas le remplacer
  • Maintenez une taille cohérente dans un même contexte
  • Ajoutez toujours un texte alternatif ou `aria-label` pour l'accessibilité
  • Les icônes solid (fas) sont plus visibles que regular (far)
  • Utilisez fa-fw (fixed-width) pour aligner des icônes en liste
  • Évitez de surcharger l'interface avec trop d'icônes
  • Respectez la sémantique des couleurs (vert=succès, rouge=danger, etc.)