Système de design GCRaccourcis CSS
Système de design GC Démarrer Aperçu des modèles de pagePage de base Aperçu des composantsAlerteAvisBarre de navigation latéraleBarre de navigation supérieureBascule de langueBoutonBoutons radioCarteCases à cocherChamp de dateChamp de saisieChemin de navigationConteneurDate de modificationDétailsEn-têteGrilleIcôneIndicateur d'étapeJeu de champsLienMasquage accessibleMenu thématiqueMessage d'erreurPaginationPied de pageRechercheRésumé des erreursSélectionSignatureTableauTéléverseur de fichiersTexteTitreZone de texte Aperçu des raccourcis CSS Réinitialisation des styles Mise en page réactiveÉtat Dimensionnement de la boîteDimensionnement du conteneurAffichageDébordementPositionVisibilité PoliceFamille de policeTaille de policeStyle de policeÉpaisseur de policeHauteur de ligneCouleur de lienTaille de lienDécoration de texte de lienStyle de listeAlignement de texteCouleur de texteDébordement de texteTransformation de texteSaut de mot MargeMarge intérieure Alignement de contenuAlignement des élémentsAlignement individuelÉlément flexibleDirection de l’élément flexibleÉlargissement de l’élément flexibleRétrécissement de l’élément flexibleHabillage de l’élément flexibleDégagementColonnes de grilleLignes de grilleJustification de contenuJustification des élémentsJustification individuelleOrdreAgencement de contenuAgencement des élémentsAgencement individuel Couleur de l'arrière-planCouleur de la bordureRayon de la bordureStyle de la bordureLargeur de la bordure Noms des icônesTaille de l'icôneImage CurseurÉvénements de pointeurTransition Aperçu des stylesUnités de styleCouleurEspacementTypographie Nous contacterS'impliquerTrouvez une démo

Noms des icônes

La classe icône définit la propriété content et d’autres styles de base d’icône tels que la famille de polices d’icônes, le style et l’épaisseur. Elle détermine l’icône gcds-icon à afficher. Aperçu
Raccourci de classe CSS Style appliqué 
gcds-icon-info-circle
 
content: "\e90a";
 
gcds-icon-warning-triangle
 
content: "\e90d";
 
gcds-icon-exclamation-circle
 
content: "\e909";
 
gcds-icon-checkmark-circle
 
content: "\e908";
 
gcds-icon-chevron-left
 
content: "\e901";
 
gcds-icon-chevron-right
 
content: "\e902";
 
gcds-icon-chevron-up
 
content: "\e903";
 
gcds-icon-chevron-down
 
content: "\e900";
 
gcds-icon-close
 
content: "\e90b";
 
gcds-icon-download
 
content: "\e906";
 
gcds-icon-email
 
content: "\e905";
 
gcds-icon-external
 
content: "\e904";
 
gcds-icon-phone
 
content: "\e90c";
 
gcds-icon-search
 
content: "\e907";

Examples

Cercle info
gcds-icon-info-circle

Cet élément a une icône de cercle d’information. 

<p>
  <span class="gcds-icon-info-circle"></span>
  Cet élément a une icône de cercle d’information.
</p>

Triangle avertissement
gcds-icon-warning-triangle

Cet élément a une icône de triangle d’avertissement. 

<p>
  <span class="gcds-icon-warning-triangle"></span>
  Cet élément a une icône de triangle d’avertissement.
</p>

Cercle exclamation
gcds-icon-exclamation-circle

Cet élément a une icône de cercle d’exclamation. 

<p>
  <span class="gcds-icon-exclamation-circle"></span>
  Cet élément a une icône de cercle d’exclamation.
</p>

Cercle coche
gcds-icon-checkmark-circle

Cet élément a une icône de cercle de coche. 

<p>
  <span class="gcds-icon-checkmark-circle"></span>
  Cet élément a une icône de cercle de coche.
</p>

Chevron gauche
gcds-icon-chevron-left

Cet élément a une icône de chevron pointant vers la gauche. 

<p>
  <span class="gcds-icon-chevron-left"></span>
  Cet élément a une icône de chevron pointant vers la
  gauche.
</p>

Chevron droite
gcds-icon-chevron-right

Cet élément a une icône de chevron pointant vers la droite. 

<p>
  <span class="gcds-icon-chevron-right"></span>
  Cet élément a une icône de chevron pointant vers la
  droite.
</p>

Chevron haut
gcds-icon-chevron-up

Cet élément a une icône de chevron pointant vers le haut. 

<p>
  <span class="gcds-icon-chevron-up"></span>
  Cet élément a une icône de chevron pointant vers le haut.
</p>

Chevron bas
gcds-icon-chevron-down

Cet élément a une icône de chevron pointant vers le bas. 

<p>
  <span class="gcds-icon-chevron-down"></span>
  Cet élément a une icône de chevron pointant vers le bas.
</p>

Fermer
gcds-icon-close

Cet élément a une icône de fermeture. 

<p>
  <span class="gcds-icon-close"></span>
  Cet élément a une icône de fermeture.
</p>

Téléchargement
gcds-icon-download

Cet élément a une icône de téléchargement. 

<p>
  <span class="gcds-icon-download"></span>
  Cet élément a une icône de téléchargement.
</p>

Courriel
gcds-icon-email

Cet élément a une icône de courriel. 

<p>
  <span class="gcds-icon-email"></span>
  Cet élément a une icône de courriel.
</p>

Externe
gcds-icon-external

Cet élément a une icône externe. 

<p>
  <span class="gcds-icon-external"></span>
  Cet élément a une icône externe.
</p>

Téléphone
gcds-icon-phone

Cet élément a une icône de téléphone. 

<p>
  <span class="gcds-icon-phone"></span>
  Cet élément a une icône de téléphone.
</p>

Recherche
gcds-icon-search

Cet élément a une icône de recherche. 

<p>
  <span class="gcds-icon-search"></span>
  Cet élément a une icône de recherche.
</p>
Style conditionnel Appliquer ces styles à des tailles d’écran précises Utilisez un préfixe de mise en page réactive pour appliquer cette classe uniquement à une taille d’écran précise. Voici les points d’arrêt possibles :
  • xs: > 480px
  • sm: > 640px
  • md: > 768px
  • lg: > 1024px
  • xl: > 1280px
<div class="xs:icon-close ...">
  ...
</div>
En savoir plus sur le préfixe de mise en page réactive. Appliquer ces styles à des états spécifiques Utilisez un préfixe d’état pour appliquer cette classe uniquement à un état d’interaction spécifié. Voici les états possibles :
  • hover
  • focus
<div class="hover:icon-close ...">
  ...
</div>
En savoir plus sur le préfixe d’état. 2025-10-01