Change Icon Sizes

Building on the Quick Start example, you can choose between three sizes of star icons. For comparison, you can see the default size 16 stars in the Overview demo. You can see the size 24 and 32 stars in the Custom Icons demo.

In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which changes the icons to size 32 stars. Note that you have to set the iconHeight and iconWidth options in addition to the icons option to let the widget know how to size the icon container.

Script	Copy Code
<script id="scriptInit" type="text/javascript"> $(document).ready(function () { $('#ratingRadio').wijrating({ iconHeight: 32, iconWidth: 32, icons: { iconsClass: 'wijmo-wijrating-normal-32', hoverIconsClass: 'wijmo-wijrating-hover-32', ratedIconsClass: 'wijmo-wijrating-rated-32' } }); }); </script>

Script

Copy Code

<script id="scriptInit" type="text/javascript">
     $(document).ready(function () {
         $('#ratingRadio').wijrating({
             iconHeight: 32,
             iconWidth: 32,
             icons: {
                 iconsClass: 'wijmo-wijrating-normal-32',
                 hoverIconsClass: 'wijmo-wijrating-hover-32', 
                 ratedIconsClass: 'wijmo-wijrating-rated-32'
             }
         });
     });             
</script>

No changes are necessary in the <body> section of your HTML file. The basic <div> tag is sufficient to create the rating.
Save your HTML file and open it in a browser. The rating appears like the one in the live widget below, with large stars.

Widgets

Quick Start

Reference

wijrating API