[jonesmktgsolutionsParticipant]

When using the counter element, how do I add a icon and change the color? What is the code to make that happen? The icon code list on the demo does not work. Thanks!

[Rue NelModerator]

Hello There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

For the meantime, please make sure that you are fully updated? (Theme and Plugins)

Our latest versions are:
X Theme: 4.3.4
Cornerstone: 1.1.3

You can find the latest version numbers here: (http://theme.co/changelog/) Then you can compare them to what’s installed on your site.

If you find anything to be out of date, you can review our update guide.

Please let us know how it goes.

[jonesmktgsolutionsParticipant]

My url is http://www.jonesmktgsolutions.com.

[RupokMember]

Hi there,

Thanks for updating. I am not sure if you are referring counter element or icon element.

For Counter, you can set the number color and text color – http://prntscr.com/a362ju

You can set the color and background color for Icon element too – http://prntscr.com/a362zc

I am not sure what’s your issue regarding this. If you are trying to add icon to the counter elements, then it’s not possible.

Cheers!

[jonesmktgsolutionsParticipant]

How do I add a icon to the counter element? The icon short code does not work.

[ChristianModerator]

Shortcodes are not allowed in the Icon Element’s fields. Currently, custom development is required if you want to use font-awesome. But, you might want to try HTML icons like this http://www.amp-what.com/ (see attachment).

Thanks.

[jonesmktgsolutionsParticipant]

How do I use different icons as listed as example under the Get Creative section when using the counter element? How do I change the html to any icon I wish to use?

http://theme.co/x/demo/renew/1/shortcodes/counter/

GET CREATIVE
You can even include icons as part of your number suffix or prefix. To do so, you’ll need to input the appropriate HTML for the icon you want. First, find the icon you want (e.g. “camera-retro”) and then input the following HTML: <i class=’x-icon-camera-retro’ data-x-icon=’’></i>. Make sure to use single quotes around the class so that it gets output properly in the shortcode.

WE TOOK
4891
PICTURES
[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”]

WE HAVE
823
BIG IDEAS
[counter num_start=”0″ num_end=”823″ num_suffix=” <i class=’x-icon-lightbulb-o’ data-x-icon=’’></i>” num_speed=”1500″ num_color=”#f1c40f” text_above=”We Have” text_below=”Big Ideas”]

[RupokMember]

Hi there,

Thanks for writing back.

#1. You can go to the Icon shortcode page – http://theme.co/x/demo/renew/1/shortcodes/icons/

#2. Inspect Element (Right CLick > Inspect Element) with Firefox or Chrome.

#3. Copy the HTML for the Icon – http://prntscr.com/a4pngu

Hope this helps.

Cheers!

[Author]

Posts