The Number Counter Module by Divi is such a nice effect to have on your website, especially when you want to put the focus on some important numbers for your business. The default icon with this module is a percent (%) sign that is placed on the left or before the number. Now, you have the chance to change that sign to any character, symbol or even words and place them before or after the number.

All you have to do is to add a CSS Class and add a CSS Code, which will take you a very short amount of time to implement.

Let’s get started!



After (1)

After (2)

Video Tutorial:


Step 1: Turn Off Percent Sign

I’m assuming that you already have a page with the Number Counter module. Now, we need to remove the percentage sign first, to do this, go to the Number Counter Module Settings > Elements > Click (to turn off) Percent Sign

Step 2: Add CSS Class to Number Counter Module

While still in the Number Counter Module Settings, head to Advanced > CSS ID & Classes > Add a CSS Class; for this example, let’s put “change-icon“.

You are welcome to change this CSS Class to your liking, but make sure to make the necessary changes to the CSS code that you will be adding to your website later on (keep on reading to know more about this).

Step 3: Add CSS Code (Head over to Theme Customizer to add CSS)

For this part of the tutorial, let’s change the percent (%) sign to a dollar ($) sign and place it on left or before the number. First, let’s go to the Theme Customizer to add the simple CSS via WordPress dashboard > Divi > Theme Customizer > Additional CSS

Now, we can add this code:

.change-icon .percent-value:before { content:'$';}

If you already have some CSS codes in there, you can add this code at the top or at the bottom; the positioning doesn’t really matter as much.

The “.change-icon” is the CSS Class that was added in Step 2. In case you changed the CSS Class to your own, make sure to make the appropriate changes!

The word “before”, places the symbol or icon on the left or before the number.

And then, make sure to click the Publish button!

That’s it! Here’s how it’s going to look now.

Additional Tips & Tricks

1) Place The Symbol, Character After The Number

For the CSS Code, we have to change the before to after

.change-icon .percent-value:after { content:'$';}

Here’s how it will look now:

2) Place Words Before/After The Number

Yes, this is possible! You can add words on the left or right/before or after the number. For this example, let’s add “More than” before or on the left of the number. All you have to do is, for the CSS Code, we have to make sure to have before after the .percent-value:, and then change the character inside the ‘ ‘. Let’s add ‘More than ‘. Notice that there’s a space after the “More than”, and this is important so there’s a space between the number and the word. Here’s the new code:

.change-icon .percent-value:before { content:'More than ';}

Here’s how it will look now:

There you go! That’s the end of this tutorial, and I hope this has helped!

If you have any questions, please feel free to leave a comment, and I will do my best to help!

If you watched the video tutorial, I hope it helped you, too! And if it did, I will be more than grateful if you could Like, Comment and Subscribe! Thank you!