Primefaces icons not shown when using Primefaces mobile

If I use primefaces only I have access to all icons that are bundled with primefaces. Hoever if I add primefaces mobile then I have only access to primefaces mobile icons and the "old" icons of primefaces are not longer shown. This should be after the following page possible with only the use of jquery and jquery mobile:

http://www.andymatthews.net/code/jQuery ... index.html

For demonstration purposes I just want mention the two following links:
1) http://www.hascode.com/2012/01/create-mobile-websites-using-java-server-faces-and-primefaces-mobile/
If you go down on the page you'll find an calendar component. If you look closer at the image you will find two plus (+) symbols instead of the icons < and >.
2)http://thomkerle.blogspot.ch/2012/07/problems-with-jquerys-fullcalendar-and.html

The second example is from myself and I tried to integrate the fullcalendar (which uses icons from jquery standard css) with mobile components. It's not possible to integrate with primefaces the two icons sets.

My question: Have I something done wrong?

[optimus.prime]

jQuery Mobile has a Mobile Themeroller which surpasses desktop ThemeRoller. I think that's the reason. Not all components are mobile optimized, e.g. calendar.

This is expected.

Hi Optimus Prime - Thanks for your fast reply but...
I'm not so shure about: I think if I take for example a <p:commandButton> - and the command button is often used in mobile applications - then the command button allows to set the icon. If you add primefaces mobile this is no longer possible (or even worser you get a wrong icon). After the first link I mentioned this should be alway possible also for other jquery components to have access to the basic icon set. Until know I have no other solution as to add command links where you can set explicitly the image. I think this is really related to primefaces. I will now try to make an example with jquery and jquery mobile where both components will be used...
Hope this will give us more progress on this subject..

Optimus Prime you was 100% right! I just tried out it with pure jQuery. It doesn't work.
Thanks for your answer:

http://thomkerle.blogspot.ch/2012/07/jquery-mobile-conflicts-with-jquery.html

In fact I have now found a workaround to modify the icons with jquery to use the schedule component on mobile devices:
First: Don't try to overwrite with

Code: Select all

$(document).ready(function(){
  $('.ui-icon.ui-icon-circle-triangle-e').css('background-image', 'url(images/back.png)');
});

This approach doesn't work because the jquery mobile components are visible before the scheduler is visible (the scheduler is ready but not rendered!).

Solution: I fire an ajax event on the schedule component and there I change the css with jquery:

Code: Select all

$(document).ready(function() {
    $("#absenceScheduleDay").ajaxSend(function(r, s) {
        $('.ui-icon.ui-icon-circle-triangle-e').css('background-image', 'url(images/back.png)');
    });
   
});

This works fine and the schedule component can be used with basic events (no special events for mobile devices) on mobile phones!