Ви можете додати піктограми до будь-якого тексту на сторінці DevSite за допомогою попередньо завантаженого шрифту піктограми Material . Ви також можете використовувати піктограми кнопок , посилаючись на кнопку.
Матеріальні ікони
Щоб додати піктограму Material у тексті на сторінці 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
Зробіть проект ».
Click <img src="/images/icon-toolbar-make.png" class="inline-icon" alt="">
<b>Make Project</b>.