Ju mund të shtoni ikona në çdo tekst në një faqe DevSite duke përdorur fontin e ikonës Materiali të ngarkuar paraprakisht. Ju gjithashtu mund të përdorni ikonat e butonave kur i referoheni një butoni.
Ikonat materiale
Për të shtuar një ikonë Materiali në linjë me tekstin tuaj në një faqe DevSite:
- Shkoni te https://fonts.google.com/icons (jo go/icons ).
- Në kutinë e ikonave të materialit të kërkimit , kërkoni për ikonën që dëshironi.
- Klikoni ikonën për të parë informacionin e përdorimit.
- Nën seksionin e shkronjave të ikonave të panelit të informacionit të përdorimit, kopjoni emrin e ikonës nga blloku i kodit të dytë.
Kopjoni sa vijon në tekstin tuaj për të shtuar ikonën:
<span class="material-icons">ICON_NAME</span>Për të ndryshuar ngjyrën e ikonës (ose madhësinë, nëse është e nevojshme), përdorni një atribut
style.
Shembull
Kodi i mëposhtëm prodhon tekstin "Për të parë detaje në lidhje me një ngjarje specifike, kliko shigjetën e zgjerimit ."
To view detail about a specific event, click the
<span class="material-icons">arrow_right</span> expander arrow.
Ju mund të përdorni <i> në vend të <span> . Të dy etiketat funksionojnë; megjithatë, hapësira është më e saktë semantikisht - për shembull, për "Klikoni delete Fshi Fshi", mund të përdorni kodin e mëposhtëm:
Click <i class="material-icons">delete</i> <b>Delete</b>.
Për çdo element me class="material-icons" , DevSite shton atributet aria-hidden="true" dhe translate="no" . Kjo siguron një përvojë më të mirë të përdoruesit për lexuesit e ekranit duke hequr artikujt e panevojshëm nga pema e aksesueshmërisë dhe nuk lejon që emri i ikonës të përkthehet gabimisht.
Ikonat e butonave
Kur dokumentoni një procedurë që përdor një ikonë butoni, shtoni class="inline-icon" në etiketën <img> . Për më shumë informacion, shihni udhëzuesin e stilit për butonat dhe ikonat .
Shembull
Kodi i mëposhtëm prodhon tekstin "Kliko
Bëni një projekt ."
Click <img src="/images/icon-toolbar-make.png" class="inline-icon" alt="">
<b>Make Project</b>.