U kunt pictogrammen toevoegen aan elke tekst op een DevSite-pagina door het vooraf geladen materiaalpictogramlettertype te gebruiken. U kunt ook knoppictogrammen gebruiken als u naar een knop verwijst.
Materiële iconen
Een materiaalpictogram inline toevoegen aan uw tekst op een DevSite-pagina:
- Ga naar https://fonts.google.com/icons (niet go/icons ).
- Zoek in het vak Zoek materiaalpictogrammen naar het gewenste pictogram.
- Klik op het pictogram om gebruiksinformatie te bekijken.
- Kopieer onder het gedeelte Pictogramlettertype van het paneel met gebruiksinformatie de naam van het pictogram uit het tweede codeblok.
Kopieer het volgende in uw tekst om het pictogram toe te voegen:
<span class="material-icons">ICON_NAME</span>Gebruik een
styleom de kleur van het pictogram (of de grootte, indien nodig) te wijzigen.
Voorbeeld
De volgende code produceert de tekst "Als u details over een specifieke gebeurtenis wilt bekijken, klikt u op de uitvouwpijl ."
To view detail about a specific event, click the
<span class="material-icons">arrow_right</span> expander arrow.
U kunt <i> gebruiken in plaats van <span> . Beide tags werken; span is echter semantisch nauwkeuriger. Voor 'Klik op delete Verwijderen Verwijderen' kunt u bijvoorbeeld de volgende code gebruiken:
Click <i class="material-icons">delete</i> <b>Delete</b>.
Voor elk element met class="material-icons" voegt DevSite de attributen aria-hidden="true" en translate="no" toe. Dit zorgt voor een betere gebruikerservaring voor schermlezers door onnodige items uit de toegankelijkheidsboom te verwijderen en zorgt ervoor dat de naam van het pictogram niet ten onrechte wordt vertaald.
Knoppictogrammen
Wanneer u een procedure documenteert die een knoppictogram gebruikt, voegt u class="inline-icon" toe aan de <img> -tag. Zie de stijlgids voor knoppen en pictogrammen voor meer informatie.
Voorbeeld
De volgende code produceert de tekst 'Klik
Project maken ."
Click <img src="/images/icon-toolbar-make.png" class="inline-icon" alt="">
<b>Make Project</b>.