web-dev-qa-db-fra.com

Étendre les icônes de l'interface utilisateur jQuery avec Font-Awesome

Je veux un moyen d’étendre les icônes par défaut de jQuery UI avec les icônes Font-Awesome. Si possible, conservez les icônes jQuery comme solution de secours, car Font-Awesome ne dispose pas d'une couverture complète.

exemple d'interface utilisateur jQuery:

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

Remplacement de Font-Awesome/Exemple étendu:

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

Le plus proche que je suis venu avec est:

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

Solution finale pour le stock jQuery avec les annotations que j'ai créées:

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

Démo jsfiddle

22
Brombomb

Voici la solution de Brombomb mais pour les icônes 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;
}
12
Clever Human

Veuillez vérifier http://www.dotcastle.com/blog/font-awesome-icons-for-jquery-mobile

  • Basé sur les derniers frameworks jQuery Mobile et Font Awesome, mis à jour lorsque l'un de ces frameworks se met à jour
  • Icônes basées sur les chemins de vecteur SVG du kit Font Awesome d'origine
  • Replis PNG pour les navigateurs sans support SVG
  • Quatre versions des fichiers CSS avec deux options pour chaque format (SVG et PNG)
  • Vous pouvez utiliser une version en ligne ou une version url des ressources en fonction de vos besoins.
0
DotCastle