Puteți adăuga pictograme la orice text de pe o pagină DevSite utilizând fontul pentru pictogramă Material preîncărcat. De asemenea, puteți utiliza pictogramele butoanelor când vă referiți la un buton.
Pictograme materiale
Pentru a adăuga o pictogramă Material în linie cu textul dvs. pe o pagină DevSite:
- Accesați https://fonts.google.com/icons (nu go/icons ).
- În caseta de pictograme Căutare material , căutați pictograma dorită.
- Faceți clic pe pictogramă pentru a vedea informațiile de utilizare.
- Sub secțiunea Font pictogramă din panoul de informații despre utilizare, copiați numele pictogramei din al doilea bloc de cod.
Copiați următoarele în text pentru a adăuga pictograma:
<span class="material-icons">ICON_NAME</span>Pentru a schimba culoarea pictogramei (sau dimensiunea, dacă este necesar), utilizați un atribut
style.
Exemplu
Următorul cod produce textul „Pentru a vedea detalii despre un anumit eveniment, faceți clic pe săgeata de extensie ”.
To view detail about a specific event, click the
<span class="material-icons">arrow_right</span> expander arrow.
Puteți folosi <i> în loc de <span> . Ambele etichete funcționează; totuși, span este mai precis din punct de vedere semantic - de exemplu, pentru „Click delete Delete Delete”, puteți folosi următorul cod:
Click <i class="material-icons">delete</i> <b>Delete</b>.
Pentru fiecare element cu class="material-icons" , DevSite adaugă atributele aria-hidden="true" și translate="no" . Acest lucru asigură o experiență de utilizator mai bună pentru cititoarele de ecran prin eliminarea elementelor inutile din arborele de accesibilitate și împiedică traducerea eronată a numelui pictogramei.
Pictograme pentru butoane
Când documentați o procedură care utilizează o pictogramă buton, adăugați class="inline-icon" la eticheta <img> . Pentru mai multe informații, consultați ghidul de stil pentru butoane și pictograme .
Exemplu
Următorul cod produce textul „Click
Faceți proiectul .”
Click <img src="/images/icon-toolbar-make.png" class="inline-icon" alt="">
<b>Make Project</b>.