Mở rộng các biểu tượng giao diện người dùng jQuery với Font-Awesome

Question

Tôi muốn có một cách để mở rộng các biểu tượng giao diện người dùng jQuery mặc định bằng các biểu tượng Font-Awesome. Nếu có thể, hãy giữ các biểu tượng jQuery dưới dạng dự phòng, vì Font-Awesome không có phạm vi phủ sóng đầy đủ.

jQuery UI Ví dụ:

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

Font Tuyệt thật Thay thế/Extended Ví dụ:

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

Gần nhất tôi đã đưa ra là:

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

Answer 1

giải pháp cuối cùng cho chứng khoán jQuery với chú thích mà tôi đã đưa ra:

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

Đây là @ Brombomb của solution nhưng đối với FontAwesome biểu tượng 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; 
} 

Answer 3

Vui lòng kiểm tra http://www.dotcastle.com/blog/font-awesome-icons-for-jquery-mobile

• Dựa trên jQuery Mobile và Font khung ảnh vui nhộn mới nhất , được cập nhật khi bất kỳ khung nào trong số các khung này cập nhật
• Icons dựa trên đường dẫn vector SVG từ Font gốc tạo ảnh vui nhộn bộ
• fallbacks PNG cho các trình duyệt mà không hỗ trợ SVG
• Bốn phiên bản của file CSS với hai lựa chọn cho mỗi định dạng (SVG & PNG)
• Bạn có thể sử dụng inline phiên bản hoặc phiên bản url của tài nguyên dựa trên các yêu cầu của bạn