Wijmo UI for the Web
Use Custom Icons
Wijmo User Guide > Widgets > Rating > Rating How To > Use Custom Icons
Show All
Hide All

Building on the Quick Start example, you can change the images displayed for the icons by using the icons option and specifying images in the css styles.

  1. In the <head> section of your HTML file, replace the script that includes the document ready function with this one, which sets the ratingMode to select a single icon, sets the size of the icons, and specifies the class to use for each state of each icon. 

    Drop down and copy script to paste in <head> section

    Script
    Copy Code 
    <script id="scriptInit" type="text/javascript">
$(document).ready(function () {            
    $('#ratingDiv').wijrating({ 
          ratingMode: 'single',
          iconWidth: 150,
          iconHeight: 150,
          icons: {
             iconsClass: ['wijrating-icon-normal-1', 'wijrating-icon-normal-2', 'wijrating-icon-normal-3', 'wijrating-icon-normal-4', 'wijrating-icon-normal-5'],
             ratedIconsClass: ['wijrating-icon-rated-1', 'wijrating-icon-rated-2', 'wijrating-icon-rated-3', 'wijrating-icon-rated-4', 'wijrating-icon-rated-5'],
             hoverIconsClass: ['wijmo-wijrating-hover-1', 'wijmo-wijrating-hover-2', 'wijmo-wijrating-hover-3', 'wijmo-wijrating-hover-4', 'wijmo-wijrating-hover-5']
          }
      });
   });            
</script>
  2. In the <head> section of your HTML file, below the script that includes the document ready function, paste these styles, which allow you to display custom icons. Here, we link to an image, but you can use any linked or locally hosted image. Set the normal, hover, and rated icon classes for each rating icon to display. We display the default count of five icons, so we need to define five icons for each class.

    Drop down and copy styles to paste in <head> section

    Script
    Copy Code 
    <style type="text/css">
   .wijrating-icon-normal-1 {
            background: transparent url("http://cdn.wijmo.com/images/chrome.png") no-repeat !important;
            opacity: 0.50;
        }
    .wijrating-icon-hover-1{
            background: transparent url("http://cdn.wijmo.com/images/chrome.png") no-repeat !important;
            opacity: 1;
        } 
    .wijrating-icon-rated-1 {
            background: transparent url("http://cdn.wijmo.com/images/chrome.png") no-repeat !important;
            opacity: 1;
        }
  
    .wijrating-icon-normal-2 {
            background: transparent url("http://cdn.wijmo.com/images/firefox.png") no-repeat !important;
            opacity: 0.50;
        }
    .wijrating-icon-hover-2{
            background: transparent url("http://cdn.wijmo.com/images/firefox.png") no-repeat !important;
            opacity: 1;
        } 
    .wijrating-icon-rated-2 {
            background: transparent url("http://cdn.wijmo.com/images/firefox.png") no-repeat !important;
            opacity: 1;
        }  
         
    .wijrating-icon-normal-3 {
            background: transparent url("http://cdn.wijmo.com/images/ie.png") no-repeat !important;
            opacity: 0.50;
        }
    .wijrating-icon-hover-3{
            background: transparent url("http://cdn.wijmo.com/images/ie.png") no-repeat !important;
            opacity: 1;
        } 
    .wijrating-icon-rated-3 {
            background: transparent url("http://cdn.wijmo.com/images/ie.png") no-repeat !important;
            opacity: 1;
        }
         
    .wijrating-icon-normal-4 {
            background: transparent url("http://cdn.wijmo.com/images/opera.png") no-repeat !important;
            opacity: 0.50;
        }
    .wijrating-icon-hover-4{
            background: transparent url("http://cdn.wijmo.com/images/opera.png") no-repeat !important;
            opacity: 1;
        } 
    .wijrating-icon-rated-4 {
            background: transparent url("http://cdn.wijmo.com/images/opera.png") no-repeat !important;
            opacity: 1;
        }
         
    .wijrating-icon-normal-5 {
            background: transparent url("http://cdn.wijmo.com/images/safari.png") no-repeat !important;
            opacity: 0.50;
        }
    .wijrating-icon-hover-5{
            background: transparent url("http://cdn.wijmo.com/images/safari.png") no-repeat !important;
            opacity: 1;
        } 
    .wijrating-icon-rated-5 {
            background: transparent url("http://cdn.wijmo.com/images/safari.png") no-repeat !important;
            opacity: 1;
        }
</style>
  3. In the <body> section of your HTML file, change to a basic <div> tag to create the rating.

    Drop down and copy script to paste in <head> section

    Script
    Copy Code 
    <div id="ratingDiv"></div>
  4. Save your HTML file and open it in a browser. The rating appears like the one in the live widget below, with logos for five major browsers as icons. Click to show the rated image for a single icon.
See Also
Change Icon Images

Reference

wijrating API

Widgets

Quick Start

 

 

Copyright © GrapeCity, Inc. All rights reserved.

Product Support Forum | Print this page