Jquery Ui Datepicker 更改图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23870927/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery Ui Datepicker change icons
提问by Vinc ?
Is there a way I can change the "Prev" and "Next" month icon of the Jquery Ui Datepicker, I know the icon is defined by the class. It look like the theme roller don't give this option.
有没有办法可以更改 Jquery Ui Datepicker 的“Prev”和“Next”月份图标，我知道该图标是由类定义的。看起来主题滚轮没有提供此选项。
回答by Irvin Dominin
You can override the arrow styles and set them to your custom image; remember to set !importantto your custom rules in order to override the jQueryUI defaults.
您可以覆盖箭头样式并将它们设置为您的自定义图像；请记住设置!important为您的自定义规则以覆盖 jQueryUI 默认值。
Like (images found on google):
喜欢（在谷歌上找到的图片）：
.ui-datepicker-prev span {
background-image: url(http://legacy.australianetwork.com/img/icon_arrow_left_black.png) !important;
background-position: 0px 0px !important;
}
.ui-datepicker-next span {
background-image: url(http://legacy.australianetwork.com/img/icon_arrow_right_black.png) !important;
background-position: 0px 0px !important;
}
回答by LOTUSMS
I understand this is an old question but if I landed here, so will others.
我知道这是一个老问题，但如果我来到这里，其他人也会如此。
I propose a different approach. When you use images, you are not able to change the color or hover state color should your application changed the look and feel. Not without recreating the images or sprite again. It is a much better idea if you changed these images with web icons using the library of your choice (FontAwesome, Ionicons, etc). This is what I do.
我提出了一种不同的方法。当您使用图像时，如果您的应用程序更改了外观和感觉，您将无法更改颜色或悬停状态颜色。并非没有再次重新创建图像或精灵。如果您使用您选择的库（FontAwesome、Ionicons 等）使用 Web 图标更改这些图像，那将是一个更好的主意。这就是我所做的。
First, remove the image with css
首先，用css删除图像
.ui-datepicker-prev span, .ui-datepicker-next span {
background-image: none !important;
}
Then, remove the Prevtext so that the icon can take its place, You are not really removing it, you're hiding it. Technically you can't remove it because the :beforedoesn't work without something to append to.
然后，删除Prev文本以便图标可以代替它，您不是真正删除它，而是隐藏它。从技术上讲，您无法删除它，因为:before如果没有附加内容，它就无法工作。
.ui-datepicker-prev span.ui-icon {
width: 6px; //this the width of the icon. increase it if your icon is bigger
height: 16px;
display: block;
text-indent: 0;
overflow: hidden;
background-repeat: no-repeat;
}
Finally, assuming you already have the web icon library already in your root, replace the content of the class with the appropriate icon attached before the item. In the case of a prev arrow, you would do this:
最后，假设您的根目录中已经有了 Web 图标库，请使用附加在项目之前的适当图标替换该类的内容。对于上一个箭头，您可以这样做：
.ui-datepicker-prev span:before {
content: "\f104";
font-family: FontAwesome;
position: relative;
}
Now you can add hover effects!
现在您可以添加悬停效果了！
.ui-datepicker-prev:hover {
color: #fff;
}
The rest is color and stuff like that
其余的是颜色和类似的东西
See it working HERE
看到它在这里工作
回答by adeneo
Just override the icons with your own CSS
只需使用您自己的 CSS 覆盖图标
.ui-icon.ui-icon-circle-triangle-w {
background: whatever
}
.ui-icon.ui-icon-circle-triangle-e {
background: whatever
}
If you prefix the CSS with the selector of a specific datepicker, it won't affect other elements.
如果您使用特定日期选择器的选择器作为 CSS 前缀，则不会影响其他元素。
.mydatepicker .ui-icon.ui-icon-circle-triangle-e { ... etc
回答by Sam P
You could of course edit the CSS directly in the jquery-ui.cssfile, but this is not acceptable.
您当然可以直接在jquery-ui.css文件中编辑 CSS ，但这是不可接受的。
Why not?
为什么不？
Let's say you change this icon in the vendor-provided CSS. When you go to upgrade these vendor CSS files in the future, you will have to manuallyfind and replace your hack every time.
假设您在供应商提供的 CSS 中更改了此图标。当您将来升级这些供应商 CSS 文件时，您每次都必须手动查找和替换您的 hack。
What's the alternative?
什么是替代方案？
1) Override the UI CSS in a custom CSS file. That way, you are not tampering with the vendor files (almost always a no-no).
1) 在自定义 CSS 文件中覆盖 UI CSS。这样，您就不会篡改供应商文件（几乎总是禁忌）。
Your file will have like so:
您的文件将如下所示：
.ui-icon.ui-icon-circle-triangle-e {
background-image: url('...');
}
2) Use a CSS preprocessor for UI, and change the precompiled code. An example can be found here.
2）对UI使用CSS预处理器，并更改预编译代码。一个例子可以在这里找到。
