> ## Documentation Index
> Fetch the complete documentation index at: https://www.mintlify.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Styliser l'icône à l'intérieur d'un composant Card

> Ajoutez une couleur de fond, des coins arrondis ou du padding aux icônes du composant Card avec du CSS personnalisé et le sélecteur d'attribut card-icon.

Le [composant Card](/docs/fr/components/cards) n'a pas de props pour styliser son icône, comme l'ajout d'une couleur de fond, de coins arrondis ou de padding. Pour personnaliser les icônes de carte tout en continuant à utiliser le composant Card, ciblez l'icône avec du CSS personnalisé.

<div id="target-the-card-icon">
  ## Cibler l'icône de la carte
</div>

Les icônes de carte sont rendues avec l'attribut `data-component-part="card-icon"`. Le sélecteur d'élément général `icon` ne correspond pas aux icônes à l'intérieur des cartes, donc une règle comme `card icon { }` n'a aucun effet. Utilisez plutôt le sélecteur d'attribut de données :

```css styling.css theme={null}
[data-component-part="card-icon"] {
  background-color: var(--gray-100);
  border-radius: 0.5rem;
  padding: 0.5rem;
}
```

Limitez la règle aux cartes avec `.card [data-component-part="card-icon"]` si le sélecteur entre en conflit avec d'autres styles.

Enregistrez la règle dans n'importe quel fichier `.css` de votre répertoire de contenu, c'est-à-dire le dossier de votre dépôt qui contient votre fichier `docs.json`. Mintlify charge le fichier automatiquement sur chaque page. Consultez [Scripts personnalisés](/docs/fr/customize/custom-scripts) pour comprendre le chargement du CSS personnalisé et la liste complète des sélecteurs disponibles.

<div id="other-card-parts">
  ## Autres parties de la carte
</div>

Les cartes exposent des attributs `data-component-part` supplémentaires que vous pouvez styliser de la même manière, notamment `card-title`, `card-content`, `card-image` et `card-cta`. Consultez [Scripts personnalisés](/docs/fr/customize/custom-scripts#element-selectors) pour la liste complète.


## Related topics

- [Icônes](/docs/fr/components/icons.md)
- [Navigation](/docs/fr/organize/navigation.md)
- [Playground](/docs/fr/api-playground/overview.md)