it-swarm.com.ru

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

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

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

11
nekojsi

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

Великолепно связанные вопросы и ответы: Расширьте иконки jQuery UI с помощью Font-Awesome

Демо: 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;
}
14
Irvin Dominin

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

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

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

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

10
Dustin

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

width: auto;
height: auto;

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

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

1
user3634222