将 jquery ui 个图像更改为图标
change jquery ui images to icon
在我的应用程序中,我使用 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}*/; }
是否有简单优雅的方法来使用 Foundation 图标而不是这些图像?
你可以考虑用图片替换字体css hack。
我用fontawesome做过类似的工作,用foundation可以类似:
/* 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。我认为 Jquery ui 中的大多数插件都使用了大量图像。与日期选择器一样,下一个和上一个图标都是图像。我正在考虑将这些图像更改为图标。我正在使用 Foundation 并尝试使用 Foundation 中的图标更改这些图像。
在 css 文件中我找到了这个
.ui-icon { width: 16px; height: 16px; background-image: url(/Content/themes/base/images/ui-icons_222222_256x240.png)/*{iconsContent}*/; }
是否有简单优雅的方法来使用 Foundation 图标而不是这些图像?
你可以考虑用图片替换字体css hack。
我用fontawesome做过类似的工作,用foundation可以类似:
/* 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