Voit lisätä kuvakkeita mihin tahansa tekstiin DevSite-sivulla käyttämällä esiladattua materiaalikuvake-fonttia . Voit myös käyttää painikekuvakkeita viitattaessa painikkeeseen.
Materiaalikuvakkeet
Materiaalikuvakkeen lisääminen tekstin kanssa DevSite-sivulle:
- Siirry osoitteeseen https://fonts.google.com/icons (not go/icons ).
- Etsi Hae materiaalikuvakkeet -ruudusta haluamasi kuvake.
- Napsauta kuvaketta nähdäksesi käyttötiedot.
- Kopioi käyttötietopaneelin Ikonifontti-osiossa kuvakkeen nimi toisesta koodilohkosta.
Kopioi seuraava tekstiisi lisätäksesi kuvakkeen:
<span class="material-icons">ICON_NAME</span>Jos haluat muuttaa kuvakkeen väriä (tai kokoa tarvittaessa), käytä
style.
Esimerkki
Seuraava koodi tuottaa tekstin "Näytä tietyn tapahtuman tiedot napsauttamalla laajennusnuolta."
To view detail about a specific event, click the
<span class="material-icons">arrow_right</span> expander arrow.
Voit käyttää <i> <span> sijaan. Molemmat tunnisteet toimivat; span on kuitenkin semanttisesti tarkempi – esimerkiksi "Napsauta delete Poista " -kohdassa voit käyttää seuraavaa koodia:
Click <i class="material-icons">delete</i> <b>Delete</b>.
Jokaiselle elementille, jossa on class="material-icons" , DevSite lisää attribuutit aria-hidden="true" ja translate="no" . Tämä varmistaa paremman käyttökokemuksen näytönlukuohjelmille poistamalla tarpeettomat kohteet esteettömyyspuusta ja estää kuvakkeen nimen virheellisen käännöksen.
Painikkeiden kuvakkeet
Kun dokumentoit painikekuvaketta käyttävän toimenpiteen, lisää class="inline-icon" <img> -tunnisteeseen. Katso lisätietoja painikkeiden ja kuvakkeiden tyylioppaasta .
Esimerkki
Seuraava koodi tuottaa tekstin "Click
Tee projekti ."
Click <img src="/images/icon-toolbar-make.png" class="inline-icon" alt="">
<b>Make Project</b>.