Этот ответ объясняет, что команда jQuery объявила о выпуске новых значков для своих компонентов пользовательского интерфейса, но я не могу найти примеры использования или даже где их скачать из. Кроме того, все темы в ThemeRoller, похоже, содержат только значки с размером по умолчанию.
Какое правильное использование этих больших наборов значков (если они были официально развернуты и могут быть легко использованы вообще)?
Я все равно не могу найти; Я думаю, что это еще не реализовано в jQuery UI.
Вы можете перейти на fontawesome, которые поддерживают то, что вы ищете.
Если вы хотите выровнять все значки пользовательского интерфейса jQuery со шрифтовым видом, вы можете использовать этот взлом для замены css:
/* Allow Font Awesome Icons in lieu of jQuery UI and only apply when using a FA icon */
.ui-icon[class*=" icon-"] {
/* Remove the jQuery UI Icon */
background: none repeat scroll 0 0 transparent;
/* Remove the jQuery UI Text Indent */
text-indent: 0;
/* Bump it up - jQuery UI is -8px */
margin-top: -0.5em;
}
.ui-button-icon-only .ui-icon[class*=" icon-"] {
/* Bump it - jQuery UI is -8px */
margin-left: -7px;
}
/* Allow use of icon-large to be properly aligned */
.ui-icon.icon-large {
margin-top: -0.75em;
}
это для замены, но вы можете напрямую использовать значки шрифтов:
<i class="icon-camera-retro"></i> icon-camera-retro
Отличный ответ Q/A: Расширение значков пользовательского интерфейса jQuery с помощью шрифта-Удивительного
Демо: http://jsfiddle.net/IrvinDominin/bEd2R/
Ответ обновлен для FontAwesome 4.0, который немного изменил классы css, потому что:
Иконки были переименованы для улучшения согласованности и предсказуемости.
Ссылка: http://fortawesome.github.io/Font-Awesome/whats-new/
код:
/* Allow Font Awesome Icons in lieu of jQuery UI and only apply when using a FA icon */
.ui-icon[class*=" fa-"] {
/* Remove the jQuery UI Icon */
background: none repeat scroll 0 0 transparent;
/* Remove the jQuery UI Text Indent */
text-indent: 0;
/* Bump it up - jQuery UI is -8px */
margin-top: -0.5em;
}
.ui-button-icon-only .ui-icon[class*=" fa-"] {
/* Bump it - jQuery UI is -8px */
margin-left: -7px;
}
/* Allow use of icon-large to be properly aligned */
.ui-icon.icon-large {
margin-top: -0.75em;
}
Хотя я согласен с тем, что векторные шрифты - это путь, я работаю в среде, где параметры групповой политики не позволяют нашим пользователям загружать эти удивительные шрифты.
Если мне нужно увеличить значок при использовании jquery ui, я просто реализую свойство масштабирования следующим образом:
.ui-icon {
zoom: 125%;
-moz-transform: scale(1.25);
-webkit-zoom: 1.25;
-ms-zoom: 1.25;
}
Обратите внимание, что это приведет к пикселизации ваших значков и их смещению, чем больше вы увеличите масштаб. Хотя это не самое приятное решение, оно работает, когда вам нужно временное решение, пока вы заканчиваете замену карты спрайтов.
Масштабирование шрифтов не очень хорошо работает для версии FA 4.0 и выше.
width: auto;
height: auto;
к обновлению поможет некоторые, но не с fonts fa-2x и больше.