Вы можете добавлять значки к любому тексту на странице DevSite, используя предварительно загруженный шрифт значка 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> . Оба тега работают; однако диапазон более семантически точен — например, для «Нажмите 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>.