[SalesForce] jquery ui icons not loading when using static resource

When I use a static resource for my jquery ui, the icons are not loading, if I use the cdn links, it loads properly.

Here I referenced the css and js for jqueryui but I think the problem is that the css code in jquery-ui.theme.min.css is unable to find the path the image which actually exists on the static resource.

<apex:includeScript value="{!URLFOR($Resource.jQuery321)}"/>


<apex:includeScript value="{!URLFOR($Resource.jqueryui112,'/jquery-ui-1.12.1.custom/jquery-ui.min.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.jqueryui112,'/jquery-ui-1.12.1.custom/jquery-ui.min.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.jqueryui112,'/jquery-ui-1.12.1.custom/jquery-ui.structure.min.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.jqueryui112,'/jquery-ui-1.12.1.custom/jquery-ui.theme.min.css')}"/>

Best Answer

I had the same issue and finally find the solution to add custom styles in the visualforce page to modify the icon path.

After the modification, it works as expected now.

The result (The previous and next arrows are icons which were missed before the modification and now they are displayed as expected.)

enter image description here

The page

<apex:page showHeader="false">
<head>
<apex:includeScript value="{!$Resource.jQuery331}"/>
<apex:includeScript value="{!URLFOR($Resource.jQueryUI1121,'jquery-ui.min.js')}"/>
<apex:stylesheet value="{!URLFOR($Resource.jQueryUI1121, 'jquery-ui.min.css')}"/>
<script>
   $j = jQuery.noConflict();
   $j(document).ready(function() {
     $j( "#datepicker" ).datepicker();     
  } );
</script>
<style>
  .ui-icon, .ui-widget-header .ui-icon, .ui-widget-content .ui-icon{
    background-image: url("{!URLFOR($Resource.jQueryUI1121, 'images/ui-icons_444444_256x240.png')}");
  }
</style>
</head>

<body>

  <p>Date: <input type="text" id="datepicker"/></p>

</body>

</apex:page>
Related Topic