Расширьте иконки пользовательского интерфейса 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-версию ресурсов на основе ваших требований.