Question

在我的应用中，我正在使用Jquery ui。我认为Jquery ui中的大多数插件都使用了很多图像。与日期选择器一样，下一个和上一个图标是图像。我在考虑将这些图像更改为图标。我正在使用Foundation并尝试使用Foundation中的图标更改这些图像。

在css文件中我找到了这个

.ui-icon { width: 16px; height: 16px; background-image: url(/Content/themes/base/images/ui-icons_222222_256x240.png)/*{iconsContent}*/; }

是否有简单而优雅的方式来使用基础图标代替这些图像？

Answer 1

您可以考虑使用图像替换字体替换css hack。

我使用fontawesome完成了类似的工作，基础可以类似：

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

.ui-button-icon-only .ui-icon[class*=" icon-"] {
    /* Bump it - jQuery UI is -8px */
    margin-left: -7px;
}

/* Allow use of icon-large to be properly aligned */
.ui-icon.icon-large {
    margin-top: -0.75em;
}

关于Fontawesome的类似问题：How to use the bigger jQuery icons

将jquery ui图像更改为图标

1 个答案: