Du kan legge til ikoner til hvilken som helst tekst på en DevSite-side ved å bruke den forhåndslastede Material-ikonfonten . Du kan også bruke knappeikoner når du refererer til en knapp.
Materiale ikoner
Slik legger du til et Material-ikon inline med teksten din på en DevSite-side:
- Gå til https://fonts.google.com/icons (ikke go/icons ).
- Søk etter ikonet du ønsker i boksen for ikoner for søkemateriale .
- Klikk på ikonet for å se bruksinformasjon.
- Kopier navnet på ikonet fra den andre kodeblokken under Icon font-delen av bruksinformasjonspanelet.
Kopier følgende inn i teksten for å legge til ikonet:
<span class="material-icons">ICON_NAME</span>For å endre ikonets farge (eller størrelse, om nødvendig), bruk et
style.
Eksempel
Følgende kode produserer teksten "For å se detaljer om en spesifikk hendelse, klikk på utvidelsespil."
To view detail about a specific event, click the
<span class="material-icons">arrow_right</span> expander arrow.
Du kan bruke <i> i stedet for <span> . Begge taggene fungerer; span er imidlertid mer semantisk nøyaktig – for eksempel for «Klikk delete slett Slett» kan du bruke følgende kode:
Click <i class="material-icons">delete</i> <b>Delete</b>.
For hvert element med class="material-icons" legger DevSite til attributtene aria-hidden="true" og translate="no" . Dette sikrer en bedre brukeropplevelse for skjermlesere ved å fjerne unødvendige elementer fra tilgjengelighetstreet , og forhindrer at navnet på ikonet blir feilaktig oversatt.
Knappikoner
Når du dokumenterer en prosedyre som bruker et knappikon, legger du til class="inline-icon" i <img> -taggen. For mer informasjon, se stilguiden for knapper og ikoner .
Eksempel
Følgende kode produserer teksten "Klikk
Lag prosjekt ."
Click <img src="/images/icon-toolbar-make.png" class="inline-icon" alt="">
<b>Make Project</b>.