Home/ Questions/Q 8175647
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T22:51:04+00:00

I’m trying to add a custom class to the jQuery Mobile theme. The CSS

  • 0

I’m trying to add a custom class to the jQuery Mobile theme. The CSS should look something like this:

.ui-icon-form-ok-f {
    background-color: #f09000 !important;
    data-icon: check !important;
}

but how can I get jQuery Mobile to recognize this? Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    How to recognize a custom icon style to jqm

    For each elements of any

    When you set [data-icon=AAA] on buttons, jqm creates <span class="ui-icon-AAA"> inside the buttons.

    That is:

    <a data-role="button" data-icon="form-ok-f">custom icon button</a>

    When loads this html, jqm creates like this:

    <a href="#" data-role="button" data-icon="form-ok-f" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-left ui-btn-up-c">
   <span class="ui-btn-inner ui-btn-corner-all">
      <span class="ui-btn-text">custom icon button</span>
      <span class="ui-icon ui-icon-form-ok-f ui-icon-shadow">&nbsp;</span>
   </span>
</a>

    So, jqm can recognize your custom-icon-class.

    .ui-icon-form-ok-f {
    background-color: #f09000 !important;
    background-position:-252px 50% !important; /* this mean 'data-icon="check"' on css */
}​​​​

    By applying this way, pages can load “ui-icon-alt”

    <a data-role="button" data-icon="check ui-icon-alt">custom icon button</a>

    Jqm renders Black icons (Alt icon color) instead of White icons.

    For each theme of any

    If you want to ‘customize’ icon for each theme of any, you should be loaded js like this:

    $(function(){
 var $alttheme = new Array( "f", "g" );　// this arr means 'data-theme="f", data-theme="g"' 
 var at = new Array();
 for( t in $alttheme ){
  at.push(':jqmData(theme="' + alttheme[t] + '"):jqmData(icon="check") > span > .ui-icon');
 }
 $(at.join()).addClass('ui-icon-"YOUR CUSTOM NAMES"');
});

    *YOUR CUSTOM NAME (eg.form-ok, form-ng …)

    OR

    $(function(){
 $(':jqmData(theme="f"):jqmData(icon="check") > span > .ui-icon').addClass('ui-icon-form-ok-f');
 $(':jqmData(theme="g"):jqmData(icon="check") > span > .ui-icon').addClass('ui-icon-form-ok-g');
});

    The former adds the same class to icons in “theme g” and “theme f”, the latter adds respectively a separate class to icons in “theme g” and “theme f”.

    At last

    i’ve to prepare for some samples.

    • 0