---
title: Icônes
description: "Jamdesk inclut Font Awesome Pro — utilisez des icônes dans cards, encadrés, navigation et texte en ligne, avec plusieurs variantes."
---

Jamdesk est livré avec **Font Awesome Pro** -- des milliers d'icônes, gratuites et pro, prêtes à l'emploi.

## Utiliser les icônes dans les composants

La plupart des composants acceptent une prop `icon` avec un nom d'icône Font Awesome :

```mdx
<Card title="Quickstart" icon="rocket" href="/quickstart">
  Learn how to set up your documentation site.
</Card>
```

<Card title="Démarrage rapide" icon="rocket" href="/fr/quickstart">
  Apprenez à configurer votre site de documentation.
</Card>

Les icônes fonctionnent dans les Cards, les Accordions, les Tabs et les éléments de navigation.

## Le composant Icon

Utilisez le composant `<Icon>` pour afficher des icônes en ligne avec du texte :

```mdx
<Icon icon="check" color="green" /> Task completed
```

<Icon icon="check" color="green" /> Tâche terminée

### Props de l'icône

| Prop | Type | Défaut | Description |
|------|------|--------|-------------|
| `icon` | string | requis | Nom de l'icône Font Awesome |
| `color` | string | - | Couleur nommée (red, blue, green) ou hexadécimale (#FF5733) |
| `size` | number | 16 | Taille en pixels |

### Exemples

```mdx
<Icon icon="star" color="yellow" size={24} />
<Icon icon="circle-check" color="green" />
<Icon icon="triangle-exclamation" color="orange" />
<Icon icon="heart" color="#E91E63" size={20} />
```

<Icon icon="star" color="yellow" size={24} /> <Icon icon="circle-check" color="green" /> <Icon icon="triangle-exclamation" color="orange" /> <Icon icon="heart" color="#E91E63" size={20} />

## Trouver des icônes

Parcourez la bibliothèque complète d'icônes sur [fontawesome.com/icons](https://fontawesome.com/icons). Recherchez ce dont vous avez besoin, puis utilisez le nom de l'icône dans vos docs.

<Tip>
Lorsque vous recherchez sur le site de Font Awesome, repérez le nom de l'icône affiché en dessous (par exemple, "circle-check", "arrow-right"). Utilisez exactement ce nom dans vos docs.
</Tip>

## Icônes de marques

Les logos de technologies et d'entreprises sont automatiquement détectés et affichés correctement :

```mdx
<Icon icon="github" size={24} />
<Icon icon="discord" size={24} />
<Icon icon="react" size={24} />
<Icon icon="python" size={24} />
```

<Icon icon="github" size={24} /> <Icon icon="discord" size={24} /> <Icon icon="react" size={24} /> <Icon icon="python" size={24} />

Les icônes de marques courantes incluent :

| Catégorie | Icônes |
|-----------|--------|
| Réseaux sociaux | github, discord, twitter, linkedin, youtube, slack |
| Langages | python, react, vuejs, angular, node-js, php, java |
| Services | aws, docker, google, microsoft, stripe, shopify |

## Variantes d'icônes

Les icônes Font Awesome sont disponibles en plusieurs variantes de style, vous permettant de contrôler le poids visuel et l'apparence. Spécifiez la variante en préfixant le nom de l'icône.

### Variantes disponibles

| Variante | Préfixe | Exemple | Description |
|----------|---------|---------|-------------|
| Solid | `solid/` | `solid/star` | Icônes remplies, poids le plus lourd |
| Regular | `regular/` | `regular/star` | Icônes en contour, poids moyen |
| Light | `light/` | `light/star` | Icônes en contour plus fin |
| Thin | `thin/` | `thin/star` | Icônes en contour le plus fin |
| Duotone | `duotone/` | `duotone/star` | Icônes bicolores avec couleurs superposées |

### Exemples

```mdx
<Icon icon="solid/bell" size={24} />
<Icon icon="regular/bell" size={24} />
<Icon icon="light/bell" size={24} />
<Icon icon="thin/bell" size={24} />
<Icon icon="duotone/bell" size={24} />
```

<Icon icon="solid/bell" size={24} /> <Icon icon="regular/bell" size={24} /> <Icon icon="light/bell" size={24} /> <Icon icon="thin/bell" size={24} /> <Icon icon="duotone/bell" size={24} />

### Utiliser les variantes dans les composants

Les variantes fonctionnent partout où des icônes sont utilisées : composants, navigation et frontmatter.

```mdx
<Card title="Callouts" icon="light/bell" href="/components/callouts">
  Add important notices to your documentation.
</Card>
```

```yaml page.mdx
---
title: Settings
icon: light/gear
---
```

```json docs.json
{
  "group": "Account",
  "icon": "regular/user",
  "pages": ["profile", "settings"]
}
```

### Variante par défaut

Lorsqu'aucune variante n'est spécifiée, Jamdesk utilise une valeur par défaut adaptée au thème :

- **Thème Jam** : utilise la variante `light` pour un rendu épuré et minimaliste
- **Autres thèmes** : utilise la variante `solid` pour une visibilité maximale

Vous pouvez toujours remplacer la valeur par défaut en spécifiant une variante explicitement.

### Comparaison des variantes

Voici la même icône dans toutes les variantes pour vous aider à choisir :

| Variante | Icône | Idéal pour |
|----------|-------|------------|
| Solid | <Icon icon="solid/folder" size={20} /> | Actions principales, mise en valeur |
| Regular | <Icon icon="regular/folder" size={20} /> | Éléments d'interface secondaires |
| Light | <Icon icon="light/folder" size={20} /> | Designs minimalistes, navigation |
| Thin | <Icon icon="thin/folder" size={20} /> | Esthétique ultra-minimaliste |
| Duotone | <Icon icon="duotone/folder" size={20} /> | Intérêt visuel, image de marque |

<Note>
Les icônes Duotone utilisent deux couleurs : une couleur principale et une nuance secondaire. La couche secondaire est automatiquement définie à une opacité plus légère de la couleur principale.
</Note>

## Icônes de navigation

Les icônes peuvent apparaître dans la navigation en barre latérale à trois niveaux : ancres, groupes et pages individuelles.

### Icônes de page

Ajoutez une icône à n'importe quelle page via le frontmatter :

```yaml authentication.mdx
---
title: Authentication
icon: lock
---
```

L'icône apparaît dans la barre latérale à côté du titre de la page.

### Icônes de groupe

Ajoutez des icônes aux groupes de navigation dans `docs.json` :

```json docs.json
{
  "group": "Security",
  "icon": "shield",
  "pages": ["authentication", "api-keys"]
}
```

### Icônes d'ancre

Ajoutez des icônes aux ancres de niveau supérieur dans `docs.json` :

```json docs.json
{
  "navigation": {
    "anchors": [
      {
        "anchor": "Docs",
        "icon": "book-open",
        "groups": [...]
      },
      {
        "anchor": "API",
        "icon": "code",
        "groups": [...]
      }
    ]
  }
}
```

## Icônes gratuites vs Pro

Jamdesk inclut Font Awesome Pro, ce qui signifie :

- **Plus de 7 000 icônes** disponibles (contre ~2 000 dans la version gratuite)
- Toutes les icônes gratuites fonctionnent sans modification
- Les icônes exclusives Pro comme les variantes duotone sont incluses
- Les icônes de poids light et thin sont disponibles

Si vous migrez depuis une autre plateforme de documentation qui utilisait Font Awesome Free, toutes vos icônes existantes continueront de fonctionner.

## Et ensuite ?

<Columns cols={2}>
  <Card title="Optimisation SEO" icon="magnifying-glass-chart" href="/fr/content/seo">
    Améliorez la découvrabilité et les métadonnées
  </Card>
  <Card title="Frontmatter" icon="file-lines" href="/fr/content/frontmatter">
    Définissez les titres, descriptions et champs SEO
  </Card>
</Columns>