Ikony môžete pridať k akémukoľvek textu na stránke DevSite pomocou predinštalovaného písma ikony Material . Pri odkaze na tlačidlo môžete použiť aj ikony tlačidiel .
Materiálové ikony
Ak chcete pridať ikonu Material do textu na stránke DevSite:
- Prejdite na stránku https://fonts.google.com/icons (nie go/icons ).
- V poli Vyhľadať ikony materiálu vyhľadajte požadovanú ikonu.
- Kliknutím na ikonu zobrazíte informácie o používaní.
- V časti Písmo ikony na paneli s informáciami o používaní skopírujte názov ikony z druhého bloku kódu.
Ak chcete pridať ikonu, skopírujte do textu nasledovné:
<span class="material-icons">ICON_NAME</span>Ak chcete zmeniť farbu (alebo veľkosť, ak je to potrebné), použite atribút
style.
Príklad
Nasledujúci kód vytvorí text „Ak chcete zobraziť podrobnosti o konkrétnej udalosti, kliknite na šípku rozbalovača .“
To view detail about a specific event, click the
<span class="material-icons">arrow_right</span> expander arrow.
Namiesto <span> môžete použiť <i> . Obidve značky fungujú; span je však sémanticky presnejší – napríklad pre „Kliknite delete Odstrániť Odstrániť“ môžete použiť nasledujúci kód:
Click <i class="material-icons">delete</i> <b>Delete</b>.
Pre každý prvok s class="material-icons" pridáva DevSite atribúty aria-hidden="true" a translate="no" . To zaisťuje lepšiu používateľskú skúsenosť pre čítačky obrazovky odstránením nepotrebných položiek zo stromu dostupnosti a zabráni chybnému prekladu názvu ikony.
Ikony tlačidiel
Pri dokumentovaní postupu, ktorý používa ikonu tlačidla, pridajte do značky <img> class="inline-icon" . Ďalšie informácie nájdete v príručke štýlov pre tlačidlá a ikony .
Príklad
Nasledujúci kód vytvorí text „Click
Urobiť projekt ."
Click <img src="/images/icon-toolbar-make.png" class="inline-icon" alt="">
<b>Make Project</b>.