用Font-Awesome擴展jQuery UI圖標

我想用一種方法來擴展帶有Font-Awesome圖標的默認jQuery UI圖標。如果可能，請將jQuery圖標作爲後備，因爲Font-Awesome沒有完全覆蓋。用Font-Awesome擴展jQuery UI圖標

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

來源

2013-07-03 Brombomb

jQuery沒有任何圖標。如果你的意思是jQuery ** UI **圖標，當然可以替換它們。你有所有的CSS。或者你可以在不更改CSS的情況下替換文件。 –

你是對的。我會更新我的問題。 – 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

來源

2013-07-05 17:15:59 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; 
}

來源

2014-01-14 15:29:24

區別是fontawesome已經改變了他們的前綴。 –

請根據最新的jQuery Mobile的和字體真棒框架檢查http://www.dotcastle.com/blog/font-awesome-icons-for-jquery-mobile

，當這些框架中的任何一個更新時更新
個圖標基於SVG矢量路徑從原來的字體真棒套件
PNG回退的瀏覽器不支持SVG
四個版本的CSS文件中爲每個格式兩個選項（SVG & PNG）
您可以使用內聯版本或url版本的資源根據您的要求

來源

2015-02-04 10:13:39 DotCastle

鏈接有問題，請您檢查一下嗎？ – egemen

用Font-Awesome擴展jQuery UI圖標

回答

相關問題