Icons in Counter Element Display Incorrectly

[acritch]

I created my site using X, then upgraded to Pro. I’ve been working on updating all my elements to new elements (where applicable). I am using the new Counter element on my home page. I have an icon in the prefix field, which looks great while in the editor:

But when I save and view the page, it shows the HTML/gibberish instead of the icon:

I have searched in the forums and found similar issues, but the fix for those issues does not fix my problem.

Any ideas? I will provide a login in a secure reply.

[mldarshana]

Hi There @acritch

Thanks for writing in! I have tried to login to your site, but I’m getting the following error.
ERROR: Incorrect username or password.

In the meantime, if you’re using a caching plugin, make sure to purge your server cache and if you’re using a CDN service like CloudFlare, you need to clear it’s cache as well. Further before testing, you need to clear your browser cache.

Let us know how it goes.
Thanks!

[acritch]

Sorry about that, I provided the incorrect password, I wrote it down on paper properly but didn’t transcribe it into the secure note properly. That is fixed, so you should be able to login now using the updated credentials in the secure note.

I have cleared all the cache in my browser and as far as I know, we do not have a caching plugin (if there is one, I don’t see it). Nothing has changed on my end since clearing browser cache.

[Prasant]

Hello @acritch,

Thanks for updating the thread.

To me it looks like a bug as I can replicate the issue on my end. I have added this into our issue tracker for our developers to take a look.

Thanks.

[acritch]

Thanks for confirming, glad it wasn’t something I was doing wrong.

Is there any ETA for a resolution? I tried the classic counter element, but that has other issues (number color won’t change, won’t show icon). Do you have any suggestions for a workaround until the base issue has been resolved?

[thai]

Hi There,

We don’t have the ETA yet.

Right now, you can try with the custom CSS. Please add the my-counter-1 class to your counter(same as with the other counters, the class should be my-counter-2, my-counter-3)`:

After that add this custom CSS:

.my-counter-1 .x-counter-number-suffix::after {
    content: '\f001';
    font-family: "FontAwesome";
}

.my-counter-2 .x-counter-number-suffix::after {
    content: '\f001';
    font-family: "FontAwesome";
}

.my-counter-3 .x-counter-number-suffix::after {
    content: '\f001';
    font-family: "FontAwesome";
}

The f001 is the unicode of FontAwesome icon. You can find all the unicode on this link:

https://fontawesome.com/icons?d=gallery

Hope it helps

[alexander]

We’ve pushed an update today with a fix for this issue. Let us know if that works for you.

[acritch]

Hi Alexander,

I can confirm the fix you guys pushed has resolved the issue! Thank you all for the quick response to the issue and the even quicker resolution!

• Alex

[Prasant]

You are most welcome.