Можете да добавяте икони към всеки текст на страница на DevSite, като използвате предварително заредения шрифт за икона на материал . Можете също да използвате икони на бутони, когато се позовавате на бутон.
Материални икони
За да добавите материална икона, вградена с вашия текст на страница на DevSite:
- Отидете на https://fonts.google.com/icons (не go/icons ).
- В полето за икони за материал за търсене потърсете иконата, която искате.
- Щракнете върху иконата, за да видите информация за употребата.
- Под секцията Шрифт на иконата на панела с информация за употреба копирайте името на иконата от втория кодов блок.
Копирайте следното във вашия текст, за да добавите иконата:
<span class="material-icons">ICON_NAME</span>За да промените цвета на иконата (или размера, ако е необходимо), използвайте атрибут
style.
Пример
Следният код създава текста „За да видите подробности за конкретно събитие, щракнете върху стрелката за разширяване .“
To view detail about a specific event, click the
<span class="material-icons">arrow_right</span> expander arrow.
Можете да използвате <i> вместо <span> . И двата маркера работят; обаче span е по-семантично точен – например за „Щракнете върху delete Изтриване Изтриване“ можете да използвате следния код:
Click <i class="material-icons">delete</i> <b>Delete</b>.
За всеки елемент с class="material-icons" DevSite добавя атрибутите aria-hidden="true" и translate="no" . Това гарантира по-добро потребителско изживяване за екранни четци чрез премахване на ненужните елементи от дървото на достъпността и предпазва името на иконата от грешен превод.
Икони на бутони
Когато документирате процедура, която използва икона на бутон, добавете class="inline-icon" към тага <img> . За повече информация вижте стиловото ръководство за бутони и икони .
Пример
Следният код създава текста „Щракнете
Направете проект ."
Click <img src="/images/icon-toolbar-make.png" class="inline-icon" alt="">
<b>Make Project</b>.