Icônes

Vous pouvez ajouter des icônes à n'importe quel texte d'une page DevSite à l'aide de la police d'icônes Material préchargée . Vous pouvez également utiliser des icônes de bouton pour faire référence à un bouton.

Icônes Material

Pour ajouter une icône Material dans le corps de votre texte sur une page DevSite:

  1. Accédez à https://fonts.google.com/icons (et non à go/icons).
  2. Dans le champ Rechercher des icônes Material , recherchez l'icône de votre choix.
  3. Cliquez sur l'icône pour afficher des informations sur l'utilisation.
  4. Dans la section "Police d'icône" du panneau d'informations sur l'utilisation, copiez le nom de l'icône du deuxième bloc de code.

  5. Pour ajouter l'icône, copiez le code suivant dans votre texte:

    <span class="material-icons">ICON_NAME</span>

  6. Pour modifier la couleur (ou la taille, si nécessaire) de l'icône, utilisez un attribut style.

Exemple

Le code suivant génère le texte "Pour afficher les détails d'un événement spécifique, cliquez sur la flèche de développement ."

To view detail about a specific event, click the
<span class="material-icons">arrow_right</span> expander arrow.

Vous pouvez utiliser <i> au lieu de <span>. Les deux balises fonctionnent, mais la balise span est plus précise sémantiquement. Par exemple, pour "Cliquez sur Supprimer Supprimer", vous pouvez utiliser le code suivant:

Click <i class="material-icons">delete</i> <b>Delete</b>.

Pour chaque élément avec class="material-icons", DevSite ajoute les attributs aria-hidden="true" et translate="no". Cela garantit une meilleure expérience utilisateur pour les lecteurs d'écran en supprimant les éléments inutiles de l'arborescence d'accessibilité et en évitant que le nom de l'icône ne soit traduit par erreur.

Icônes de bouton

Lorsque vous documentez une procédure qui utilise une icône de bouton, ajoutez class="inline-icon" à la balise <img>. Pour en savoir plus, consultez le guide de style pour les boutons et les icônes.

Exemple

Le code suivant génère le texte "Cliquez sur Make Project (Créer un projet)."

Click <img src="/images/icon-toolbar-make.png" class="inline-icon" alt="">
<b>Make Project</b>.