Estendi icone dell'interfaccia utente jQuery con Font-Awesome

Question

Desidero un modo per estendere le icone dell'interfaccia utente jQuery predefinite con le icone Font-Awesome. Se possibile, mantieni le icone jQuery come riserva, poiché Font-Awesome non ha una copertura completa.

jQuery UI Esempio:

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

Font-Impressionante sostituzione/Esempio avanzato:

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

Il più vicino sono venuto in mente è:

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

Answer 1

soluzione finale per magazzino jQuery con annotazioni che ho trovato:

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

Demo jsfiddle

Answer 2

Ecco @ Brombomb di solution ma per FontAwesome 4.x icone:

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

Answer 3

prega di controllare http://www.dotcastle.com/blog/font-awesome-icons-for-jquery-mobile

• Sulla base degli ultimi jQuery Mobile e caratteri quadri impressionanti , aggiornato quando uno di questi framework aggiorna
• icone basate su tracciati vettoriali SVG dal carattere originale kit Impressionante
• fallback PNG per browser con un supporto per SVG
• Quattro versioni dei file CSS con due opzioni per ogni formato (SVG & PNG)
• È possibile utilizzare in linea versione o versione URL delle risorse in base alle vostre esigenze