A DevSite oldalon lévő bármely szöveghez ikonokat adhat hozzá az előre betöltött Material icon betűtípus használatával. Gombokra hivatkozva gombikonokat is használhat .
Anyag ikonok
Anyag ikon hozzáadása a szöveghez egy DevSite oldalon:
- Nyissa meg a https://fonts.google.com/icons (not go/icons ) oldalt.
- Az Anyag ikonok keresése mezőben keresse meg a kívánt ikont.
- Kattintson az ikonra a használati információk megtekintéséhez.
- A használati információs panel Ikon font része alatt másolja ki az ikon nevét a második kódblokkból.
Másolja a következőket a szövegbe az ikon hozzáadásához:
<span class="material-icons">ICON_NAME</span>Az ikon színének (vagy méretének, ha szükséges) módosításához használjon
style.
Példa
A következő kód a következő szöveget hozza létre: "Egy adott esemény részleteinek megtekintéséhez kattintson a nyílra."
To view detail about a specific event, click the
<span class="material-icons">arrow_right</span> expander arrow.
<span> helyett használhatja <i> . Mindkét címke működik; azonban a terjedelem szemantikailag pontosabb – például a „Click delete Delete Delete” esetén a következő kódot használhatja:
Click <i class="material-icons">delete</i> <b>Delete</b>.
A DevSite minden class="material-icons" elemhez hozzáadja az aria-hidden="true" és translate="no" attribútumokat. Ez jobb felhasználói élményt biztosít a képernyőolvasók számára azáltal, hogy eltávolítja a szükségtelen elemeket a kisegítő lehetőségek fából , és megakadályozza az ikon nevének hibás lefordítását.
Gomb ikonok
Ha egy gomb ikont használó eljárást dokumentál, adja hozzá class="inline-icon" az <img> címkéhez. További információért tekintse meg a gombok és ikonok stílus útmutatóját .
Példa
A következő kód a „Click
Készíts projektet ."
Click <img src="/images/icon-toolbar-make.png" class="inline-icon" alt="">
<b>Make Project</b>.