Как использовать большие значки jQuery

Ответ 1

Я все равно не могу найти; Я думаю, что это еще не реализовано в 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/

UPDATE

Ответ обновлен для 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;
}

Ответ 2

Хотя я согласен с тем, что векторные шрифты - это путь, я работаю в среде, где параметры групповой политики не позволяют нашим пользователям загружать эти удивительные шрифты.

Если мне нужно увеличить значок при использовании jquery ui, я просто реализую свойство масштабирования следующим образом:

.ui-icon { 
    zoom: 125%; 
    -moz-transform: scale(1.25); 
    -webkit-zoom: 1.25; 
    -ms-zoom: 1.25;
}

Обратите внимание, что это приведет к пикселизации ваших значков и их смещению, чем больше вы увеличите масштаб. Хотя это не самое приятное решение, оно работает, когда вам нужно временное решение, пока вы заканчиваете замену карты спрайтов.

Ответ 3

Масштабирование шрифтов не очень хорошо работает для версии FA 4.0 и выше.

width: auto;
height: auto;

к обновлению поможет некоторые, но не с fonts fa-2x и больше.

Демо: http://jsfiddle.net/LpC4L/