18

我想要一种使用 Font-Awesome 图标扩展默认 jQuery UI 图标的方法。如果可能的话，保留 jQuery 图标作为备用，因为 Font-Awesome 没有完全覆盖。

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

3 回答 3

22

带有我想出的注释的股票 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-05T17:15:59.607 回答
12

这是@Brombomb 的解决方案，但对于 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-14T15:29:24.123 回答
0

请检查http://www.dotcastle.com/blog/font-awesome-icons-for-jquery-mobile

  • 基于最新的 jQuery Mobile 和 Font Awesome 框架，当这些框架更新时更新
  • 基于原始 Font Awesome 套件中的 SVG 矢量路径的图标
  • 不支持 SVG 的浏览器的 PNG 后备
  • 四个版本的 CSS 文件，每种格式有两个选项（SVG 和 PNG）
  • 您可以根据您的要求使用资源的内联版本或 url 版本
于 2015-02-04T10:13:39.603 回答