Docs

[Chris Stovall]

I’m trying to create this simple effect like you have on your demo site but as soon as I try and change the code for the icon it breaks.

This is the code I’m getting from your demo site for counter with codes:
[counter num_start="0" num_end="4891" num_prefix="<i class='x-icon-camera-retro' data-x-icon=''></i> " num_speed="1500" num_color="#9b59b6" text_above="We Took" text_below="Pictures"]
It works fine.

I was able to track down the two icon codes I should need to swap out but it doesn’t seem to be working.
data-x-icon: &#xf07a
x-icon-dollar

This is the code of icons on the integrity site. The format does not match what the shortcode is looking for.
[icon type=”dollar”]

I have tried to drop these into the code above and it just seems to break the counter. One of the problems with these shortcodes is that we can’t ever see the “data-x-icon” code as it always appears as box. It would be good if there was a way to put some instructions as to what needs to be done to change the icons in the shortcodes.

Thank you very much for your time!

[Chris Stovall]

The site. I forgot.

http://grabthegold.com/new-philosophy-page/

[Rue Nel]

Hello There,

Thanks for writing in! Regretfully you cannot insert any form of html or shortcode as the prefix and suffix of the counter element. Adding any invalid character will be ignored to prevent Cornerstone from breaking up.

Thank you for your understanding.

[Chris Stovall]

All I’m trying to do is change the icon to the dollar sign.

Can you please send me the code to achieve this? I’m not trying to insert any HTML. Just need the code to change the icon from the shopping cart to the dollar sign and it doesn’t seem to be working.

Thanks!

[Rad]

Hi there,

Please add this CSS to Admin > Appearance > Customizer > Custom > CSS,

.x-counter .x-icon-dollar:before {
content: "\f155";
}

Since adding HTML is not possible, then the only option for now is by CSS.

Thanks!

[Chris Stovall]

But what is the code for the counter then?

Can you please send me the updated code as well?

[Christopher]

Hi there,

Please try this code :

<i class='x-icon-camera-retro' data-x-icon=''></i>

The final code would be :

[counter num_start="0" num_end="4891" num_prefix="<<i class='x-icon-camera-retro' data-x-icon=''></i> " num_speed="1500" num_color="#9b59b6" text_above="We Took" text_below="Pictures"]

Hope it helps.

[Chris Stovall]

Okay. That seemed to work.

http://grabthegold.com/new-philosophy-page/

1) Not sure where the styling of the fonts is coming from in the counter but I need both block grids to match the rest of the fonts on the site.

Thank you for your help!

[Rupok]

Hi there,

Thanks for updating. You could use the following selector to change the font family of counter :

.x-counter {
  font-family: "Lato",sans-serif;
}

Hope this helps.

Cheers!

[Chris Stovall]

Why does the other one on the page not have the issues?

The bottom counter is fine.

When I add the code above it breaks the icons and the font.

I need the top counter to look like the bottom counter but have the dollar sign icon. That’s it.

Thanks!
CDS

[Chris Stovall]

Strangest thing. I just copied and pasted the code again and it worked. There was an extra “<” in your code.

[Prasant Rai]

Happy to hear that. Feel free to ask us again. Have a great day! 🙂

[Author]

Posts