The post How do I use a custom preloader? appeared first on Client and Product Testimonials Pro.

You can also use an icon font-family such as Font Awesome. A lot of themes come pre-bundled with the Font Awesome font family, so you can easily make use of it with your testimonial ratings. Below, I’ll show you how you can use the Font Awesome family to display hearts for ratings, instead of the default stars.

All of the code below, apart from the last snippet of CSS should go into the bottom of the functions.php file of your active theme. Functions.php can be found inside the root of your active theme.

Snippet

First, we’re going to enqueue the Font Awesome font family from a CDN. If your theme already loads Font Awesome, you can skip this step.

/*	
*   Enqueue the font awesome font family
*   Notice we are making use of the client_and_product_testimonials_font_family filter
*/
function load_font_awesome_for_rating_icons() {
    return wp_enqueue_style( 'fontawesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' );
}
add_filter( 'client_and_product_testimonials_font_family', 'load_font_awesome_for_rating_icons' );

Next, we’re going to specify that we want the filled in hearts used for the filled in rating icon.

/*	
*   Custom Filled Icon Class
*/
function heart_filled_rating_icon() {
    return 'fa fa-heart';
}
add_action( 'client_and_product_testimonials_filled_icon_class', 'heart_filled_rating_icon', 10 );

And then we’ll specify that we want the empty hearts used for the empty rating icons.

/*	
*   Custom Empty Icon Class
*/
function heart_empty_rating_icon() {
    return 'fa fa-heart-o';
}
add_action( 'client_and_product_testimonials_empty_icon_class', 'heart_empty_rating_icon', 10 );

Last but not least we’re going to give our new heart icons a custom color, instead of the default yellow. We’ll go with a more expected pink color for the hearts. This will go into your active themes style.css file. If you need additional help, please see the How do I change the color of the rating stars? FAQ article in the knowledge base.

.client-product-testimonial-rating-container .capt-rating-icon {
   color: rgba(249, 169, 227, 0.67);
}

Results

The final output of the above code snippets will result in something similar to the following:

The post How do I use my own icons for the ratings? appeared first on Client and Product Testimonials Pro.

If you are uncomfortable editing code, you can use a plugin such as Simple Custom CSS.

Snippet

.client-product-testimonial-rating-container .capt-rating-icon {
   color: lightblue;
}

Note: You can use Hex or RGB values in CSS code.

Results

The above code will result in something similar to:

The post How do I change the color of the rating stars? appeared first on Client and Product Testimonials Pro.