Расширьте иконки пользовательского интерфейса jQuery со шрифтом "Удивительный"

Я хочу, чтобы расширять иконки пользовательского интерфейса jQuery по умолчанию со значками Font-Awesome. Если возможно, сохраните значки jQuery в качестве резервной копии, поскольку Font-Awesome не имеет полного покрытия.

Пример пользовательского интерфейса jQuery:

$("#muteAll").button({
    text: false, 
    icons: { 
        primary: "ui-icon-volume-on" 
    }
});

Font-Awesome Replacement/Extended Пример:

$("#muteAll").button({
    text: false, 
    icons: { 
        primary: "icon-volume-up" 
    }
});

Самое близкое, что я придумал, это:

.ui-icon[class*=" icon-"] {
    background: none repeat scroll 0 0 transparent;
    left: 0;
    margin-left: 1px; 
    text-indent: 0;
}

Ответы

Ответ 1

Окончательное решение для запаса jQuery с аннотациями, которые я придумал:

/* 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;
}

/* Allow use of icon-large to be properly aligned */
.ui-icon.icon-large {
    margin-top: -0.75em;
}

.ui-button-icon-only .ui-icon[class*=" icon-"] {
    /* Bump it - jQuery UI is -8px */
    margin-left: -7px;
}

Демо jsfiddle

Ответ 2

Вот @Brombomb решение, но для значков FontAwesome 4.x:

/* 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;
}

/* Allow use of icon-large to be properly aligned */
.ui-icon.icon-large {
    margin-top: -0.75em;
}

.ui-button-icon-only .ui-icon[class*=" fa-"] {
    /* Bump it - jQuery UI is -8px */
    margin-left: -7px;
}

Ответ 3

Пожалуйста, проверьте http://www.dotcastle.com/blog/font-awesome-icons-for-jquery-mobile

  • На основе последних jQuery мобильных и шрифтов Awesome frameworks, обновленных при обновлении любой из этих фреймворков
  • Иконки, основанные на векторных дорожках SVG, из оригинального набора шрифтов Awesome.
  • Отказы PNG для браузеров без поддержки SVG.
  • Четыре версии файлов CSS с двумя параметрами для каждого формата (SVG и PNG)
  • Вы можете использовать встроенную версию или URL-версию ресурсов на основе ваших требований.