Я нахожу значки в пользовательском интерфейсе jquery немного маленькими для своего приложения. Регулировка размеров на .ui-значке, конечно, не помогает, потому что изображения загружаются из одного файла изображения, поэтому он просто отображает части других значков.
Есть ли способ отрегулировать размеры значков без необходимости изменять размер файлов изображений значков для каждого размера, который я хотел бы использовать?
Нет. Поскольку значки упакованы в сетку спрайтов CSS, вы увидите только значки вокруг, если попытаетесь сделать значок сам по себе большим (как вы видели). Вы можете увеличить "размер" значка, отрегулировав его, но это не сделает графику больше - просто пространство, которое оно занимает.
Изменить. Похоже, команда jQuery UI уже слышала эту жалобу и отправляется выкладывает несколько более крупных значков в следующей версии jQuery UI.
Это старая проблема, но вот мое решение (взломайте, если хотите):
.ui-icon-circle-close {
-ms-transform: scale(2); /* IE 9 */
-webkit-transform: scale(2); /* Chrome, Safari, Opera */
transform: scale(2);
}
Для кнопки только для значков она отлично работает.
Обратите внимание, что вы действительно можете использовать любой значок, который вы хотите, пока вы создаете стиль CSS, который его использует, и он не обязательно должен быть в пакете спрайтов. "Иконное имя" в jQuery UI Buttons - это просто имя класса.
В блоге "Sit Down Waldo" есть хороший пример здесь. Он демонстрирует использование самого превосходного значка цвета FAMFAMFAM, но вы можете реально использовать его "ядро " для настройки позиционирования, а затем использовать любой значок, который вы хотите в своем CSS.
Использование его примера довольно просто, просто загрузите файлы (вам понадобятся только папки css и значков), затем добавьте эти строки в свой HTML файл
<link href="libs/famfamfam/css/fff.icon.core.css" type="text/css" rel="stylesheet"/>
<link href="libs/famfamfam/css/fff.icon.icons.css" type="text/css" rel="stylesheet"/>
затем используйте одно из имен значков в ваших параметрах. {icons: {primary: 'fff-icon-connect'},text: false}
PS. К сожалению, не похоже, что новые параметры выбора для пользовательского интерфейса jQuery произошли, хотя они говорили об этом 7 месяцев назад. Они делали их чуть больше, но они не вводили совершенно новый размер.
Попробуйте http://mkkeck.github.io/jquery-ui-iconfont/
Источники: https://github.com/mkkeck/jquery-ui-iconfont
Его нужно включить только jquery-ui.icons.css и каталог шрифтов.
Размер значков jquery можно изменить следующим образом:
<style type="text/css">
.ui-icon {
font-size: 1.2em;
}
</style>