Możesz dodawać ikony do dowolnego tekstu na stronie DevSite, korzystając z wstępnie załadowanego czcionki ikon Material . Możesz też użyć ikony przycisku, gdy odwołujesz się do przycisku.
Ikony w stylu Material Design
Aby dodać ikonę Material Design w tekstowej treści strony DevSite:
- Otwórz stronę https://fonts.google.com/icons (nie go/icons).
- W polu Szukaj ikony Material Design wyszukaj odpowiednią ikonę.
- Aby zobaczyć informacje o użytkowaniu, kliknij ikonę.
- W panelu informacji o użyciu w sekcji „Czcionka ikony” skopiuj nazwę ikony z drugiego bloku kodu.
Aby dodać ikonę, skopiuj ten tekst:
<span class="material-icons">ICON_NAME</span>Aby zmienić kolor (lub w razie potrzeby rozmiar) ikony, użyj atrybutu
style.
Przykład
Ten kod wyświetla tekst „Aby wyświetlić szczegóły konkretnego wydarzenia, kliknij strzałkę rozwijania ”.
To view detail about a specific event, click the
<span class="material-icons">arrow_right</span> expander arrow.
Zamiast <span> możesz użyć <i>. Oba tagi działają, ale tag span jest bardziej poprawny semantycznie. Na przykład w przypadku tagu „Kliknij delete Usuń Usuń” możesz użyć tego kodu:
Click <i class="material-icons">delete</i> <b>Delete</b>.
W przypadku każdego elementu z class="material-icons" witryna deweloperów dodaje atrybuty aria-hidden="true" i translate="no". Dzięki temu czytniki ekranu będą działać lepiej, ponieważ z drzewa ułatwień zostaną usunięte niepotrzebne elementy, a nazwa ikony nie zostanie błędnie przetłumaczona.
Ikony przycisków
Podczas dokumentowania procedury, która wykorzystuje ikonę przycisku, dodaj class="inline-icon" do tagu <img>. Więcej informacji znajdziesz w przewodniku po stylach przycisków i ikon.
Przykład
Ten kod wyświetla tekst „Kliknij 
Utwórz projekt”.
Click <img src="/images/icon-toolbar-make.png" class="inline-icon" alt="">
<b>Make Project</b>.