Erweitern Sie die jQuery UI Icons mit Font-Awesome

Ich möchte eine Möglichkeit, die Standard-jQuery UI-Icons mit Font-Awesome-Icons zu erweitern. Wenn möglich, bewahren Sie die jQuery-Symbole als Fallback auf, da Font-Awesome nicht vollständig abgedeckt ist.Erweitern Sie die jQuery UI Icons mit Font-Awesome

jQuery UI Beispiel:

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

Font-Super Ersatz/Erweitert Beispiel:

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

Der nächstgelegene ich kommen mit haben, ist:

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

Quelle

2013-07-03 Brombomb

jQuery hat keine Symbole. Wenn Sie jQuery ** UI ** -Symbole meinen, können Sie diese natürlich ersetzen. Sie haben alle CSS. Oder Sie könnten einfach die Dateien ersetzen, ohne das CSS zu ändern. –

Sie haben Recht. Ich werde meine Frage aktualisieren. – Brombomb

Endlösung für Lager jQuery mit Anmerkungen, die ich mir ausgedacht habe:

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

Quelle

2013-07-05 17:15:59 Brombomb

Hier @ Brombomb der solution aber für FontAwesome 4.x Symbole:

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

Quelle

2014-01-14 15:29:24

der unterschied ist fontawesome hat ihre präfix geändert. –

Bitte überprüfen http://www.dotcastle.com/blog/font-awesome-icons-for-jquery-mobile

Basierend auf den neuesten jQuery Mobile und Font Super-Frameworks , aktualisiert, wenn eines dieser Frameworks aktualisiert wird
Icons basierend auf SVG Vektorpfade von dem ursprünglichen Font Super-Kit
PNG-Fallbacks für Browser ohne SVG-Unterstützung
Vier Versionen der CSS-Dateien mit zwei Optionen für jedes Format (SVG & PNG)
Sie können Inline verwenden Version oder URL-Version der Ressourcen basierend auf Ihren Anforderungen

Quelle

2015-02-04 10:13:39 DotCastle

Link hat ein Problem, können Sie es bitte überprüfen? – egemen

Erweitern Sie die jQuery UI Icons mit Font-Awesome

Antwort

Verwandte Themen