Du kan lägga till ikoner till vilken text som helst på en DevSite-sida genom att använda det förladdade materialikonteckensnittet . Du kan också använda knappikoner när du hänvisar till en knapp.
Material ikoner
Så här lägger du till en materialikon inline med din text på en DevSite-sida:
- Gå till https://fonts.google.com/icons (inte go/icons ).
- I rutan Sökmaterialikoner , sök efter den ikon du vill ha.
- Klicka på ikonen för att se användningsinformation.
- Kopiera namnet på ikonen från det andra kodblocket under avsnittet Ikonteckensnitt på panelen för användningsinformation.
Kopiera följande till din text för att lägga till ikonen:
<span class="material-icons">ICON_NAME</span>För att ändra ikonens färg (eller storlek, om det behövs), använd ett
style.
Exempel
Följande kod producerar texten "För att se detaljer om en specifik händelse, klicka på pilen för att expandera ."
To view detail about a specific event, click the
<span class="material-icons">arrow_right</span> expander arrow.
Du kan använda <i> istället för <span> . Båda taggarna fungerar; span är dock mer semantiskt korrekt – till exempel för "Klicka delete Ta bort" kan du använda följande kod:
Click <i class="material-icons">delete</i> <b>Delete</b>.
För varje element med class="material-icons" lägger DevSite till attributen aria-hidden="true" och translate="no" . Detta säkerställer en bättre användarupplevelse för skärmläsare genom att ta bort onödiga objekt från tillgänglighetsträdet och förhindrar att namnet på ikonen översätts felaktigt.
Knappikoner
När du dokumenterar en procedur som använder en knappikon, lägg till class="inline-icon" i taggen <img> . För mer information, se stilguiden för knappar och ikoner .
Exempel
Följande kod producerar texten "Klick
Gör projekt ."
Click <img src="/images/icon-toolbar-make.png" class="inline-icon" alt="">
<b>Make Project</b>.