Change Rating Control style

If you use Rating Control, and want to use another icon instead of stars, try the following:

Change Icon

Add the following classes to the Design System you are using. WithWorkWithPlus, the default design system is WorkWithPlusDS.

.rating-container-rtl .rating-stars:before, .rating-container-rtl:before, .rating-container:before
{
      content: '\e005\e005\e005\e005\e005';
}

 .rating-container .rating-stars:before
{
      content: '\e005\e005\e005\e005\e005';
      text-shadow: 0 0 1px rgba(0, 0, 0, .7);
 } 

Write the Unicode code into content: '<Copy unicode here>'

You can use the unicode code by writing '\e000' to '\e260', where the numbers 000 to 260 are the codes for the different icons.

To add more than one icon, add the unicode codes one next to the other.

'\e104\e104\e104\e104\e104\e005\e006'

Change color

To change the color of the selected icons, just add the following class to WorkWithPlusDS and change the hexadecimal color code.

.rating-container .rating-stars {  color: #16FF60;  }
 

0 Votes