web-dev-qa-db-ja.com

jQueryUIアイコンをFont-Awesomeで拡張する

デフォルトのjQueryUIアイコンをFont-Awesomeアイコンで拡張する方法が必要です。 Font-Awesomeは完全にカバーされていないため、可能であれば、jQueryアイコンをフォールバックとして保持してください。

jQuery UIの例：

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

フォント-素晴らしい置換/拡張例：

$("#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;
}
jquery-uifont-awesome
18
Brombomb

私が思いついたアノテーションを使用したスト​​ック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

22
Brombomb

これが@Brombombの solution ですが、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

確認してください http://www.dotcastle.com/blog/font-awesome-icons-for-jquery-mobile

  • 最新のjQueryMobileおよびFontAwesomeフレームワークに基づいており、これらのフレームワークのいずれかが更新されると更新されます
  • オリジナルのFontAwesomeキットのSVGベクターパスに基づくアイコン
  • SVGをサポートしていないブラウザのPNGフォールバック
  • 各形式（SVGおよびPNG）に2つのオプションがあるCSSファイルの4つのバージョン
  • 要件に基づいて、リソースのインラインバージョンまたはURLバージョンを使用できます
0
DotCastle