Icons missing in jQuery UI

Question

I\'m using Modal Form and Widgets from jQuery, but the icons does not appear. for eg the Cross (X) and Plus-Minus (+-) Icons.

When I load the p

Answer 1

Yeah I had the same problem and it was driving me crazy because I couldn't find the image.

This may help you out...

1. Look for a CSS file in your directories called jquery-ui.css
2. Open it up and search for ui-bg_flat_75_ffffff_40x100.png.

You will then see something like this...

.ui-widget-content {
    border: 1px solid #aaaaaa;
    background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x;
    color: #222222;
}

And comment out the background and save the CSS document. Or you can set an absolute path to that background property and see if that works for you. (i.e. background: #ffffff url(http://.../image.png);

Hope this helps

Answer 2

I found icons were not displaying due to a difference in the casing (ie upper case vs lower case). The CSS file was using "FFFFFF" while the actual file was using "ffffff". Icons displayed for me once I changed the case to match.

Answer 3

I saw in console that whenever I open my datepicker that I get 404 Not found error for this image file ui-bg_glass_75_e6e6e6_1x400.png

I downloaded the image from github and put it in my local under jquery-ui folder. Now the problem is solved.

Other image files found here:

https://github.com/julienw/jquery-trap-input/tree/master/lib/jquery/themes/base/images

Answer 4

Having the right CSS and JS libraries helps, this solved it for me

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Answer 5

I also got missing error image in JQUERY-UI. You can download images from https://github.com/sehmaschine/django-grappelli/tree/grappelli_2_4/grappelli/static/grappelli/jquery/ui/css/custom-theme/images