[ACCEPTED]-Jquery Ui Datepicker change icons-jquery-ui

You can override the arrow styles and set 4 them to your custom image; remember to set 3 !important to your custom rules in order to override 2 the jQueryUI defaults.

Like (images found 1 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;
}

Demo Fiddle

I understand this is an old question but 22 if I landed here, so will others.

I propose 21 a different approach. When you use images, you 20 are not able to change the color or hover 19 state color should your application changed 18 the look and feel. Not without recreating 17 the images or sprite again. It is a much 16 better idea if you changed these images 15 with web icons using the library of your 14 choice (FontAwesome, Ionicons, etc). This 13 is what I do.

First, remove the image with 12 css

.ui-datepicker-prev span, .ui-datepicker-next span {
    background-image: none !important;
}

Then, remove the Prev text so that the icon 11 can take its place, You are not really removing 10 it, you're hiding it. Technically you can't 9 remove it because the :before doesn't work without 8 something to append to.

.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 7 you already have the web icon library already 6 in your root, replace the content of the 5 class with the appropriate icon attached 4 before the item. In the case of a prev arrow, you 3 would do this:

.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 2 rest is color and stuff like that

See it 1 working HERE

Just override the icons with your own CSS

.ui-icon.ui-icon-circle-triangle-w {
    background: whatever
}

.ui-icon.ui-icon-circle-triangle-e {
    background: whatever
}

FIDDLE

If 3 you prefix the CSS with the selector of 2 a specific datepicker, it won't affect other 1 elements.

.mydatepicker .ui-icon.ui-icon-circle-triangle-e { ... etc

You could of course edit the CSS directly 11 in the jquery-ui.css file, but this is not acceptable.

Why not?

Let's 10 say you change this icon in the vendor-provided 9 CSS. When you go to upgrade these vendor 8 CSS files in the future, you will have to 7 manually find and replace your hack every time.

What's the alternative?

1) Override 6 the UI CSS in a custom CSS file. That way, you 5 are not tampering with the vendor files 4 (almost always a no-no).

Your file will have 3 like so:

 .ui-icon.ui-icon-circle-triangle-e {
      background-image: url('...');
 }

2) Use a CSS preprocessor for UI, and 2 change the precompiled code. An example 1 can be found here.