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

ответ объясняет, что команда jQuery объявила о развертывании новых значков для своих компонентов пользовательского интерфейса, но я не могу найти примеров использования или даже где их скачать. Кроме того, все темы в ThemeRoller, похоже, предлагают только значки с размером по умолчанию.

Как правильно использовать эти большие наборы значков (если они были официально развернуты и могут быть легко использованы вообще)?

11
css jquery jquery-ui

3 ответов

Я не могу найти в любом случае; я думаю, что еще не реализован в jQuery UI.

вы можете перейти к fontawesome, эта поддержка, что вы ищете.

если вы хотите выровнять все иконки jQuery UI с fontawesome взгляд, вы можете использовать этот 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;
}

это для замены, но вы можете использовать fontawesome иконы, как:

<i class="icon-camera-retro"></i> icon-camera-retro

большой связанный Q/ A:расширить jQuery UI иконки с Шрифт-Удивительный

демо:http://jsfiddle.net/IrvinDominin/bEd2R/

обновление

ответ обновлен для FontAwesome 4.0, который немного изменил классы css, потому что:

значки были переименованы для повышения согласованности и предсказуемости.

Ref: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;
}
14

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

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

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

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

10

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

width: auto;
height: auto;

в обновлении помогут некоторые, но не шрифты fa-2x и больше.

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

1