Иконки кнопок jQuery Mobile

Предоставленный набор иконок jQuery Mobile может сделать ваши кнопки более привлекательными.

Добавление иконки к кнопкам jQuery Mobile

Чтобы добавить иконку к вашей кнопке, используйте атрибут data-icon:

<a href="#anylink" data-role="button" data-icon="search">Поиск</a>

Совет:Вы также можете использовать атрибут data-icon в элементах <button> или <input>.

Ниже мы перечислили некоторые доступные иконки, предоставляемые jQuery Mobile:

значение свойства описание иконка пример
data-icon="arrow-l" левый стрелка тест
data-icon="arrow-r" правый стрелка тест
data-icon="delete" удалить тест
data-icon="info" информация тест
data-icon="home" домашняя страница тест
data-icon="back" обратиться назад тест
data-icon="search" поиск тест
data-icon="grid" сетка тест

Для получения полной информации о кнопочных иконах jQuery Mobile посетите наш Руководство по иконам jQuery Mobile.

Позиционирование иконы

Вы также можете определить место, где будет размещена икона: вверх, вправо, вниз или влево.

Используйте атрибут data-iconpos для определения местоположения:

Pozicionirovanie ikony:

<a href="#link" data-role="button" data-icon="search" data-iconpos="top">вверх</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="right">вправо</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="bottom">вниз</a>
<a href="#link" data-role="button" data-icon="search" data-iconpos="left">Влево</a>

Попробуйте сами

Совет:По умолчанию, иконки всех кнопок располагаются слева.

Показывать только значок

Если нужно только показать значок, установите data-iconpos в "notext":

Назад:

<a href="#link" data-role="button" data-icon="search" data-iconpos="notext">Поиск</a>

Попробуйте сами