Adding icon to Alert

Hi, i’m trying to add an exclamation icon by using this shortcode:

[x_icon type=“exclamation-circle” style=“font-size: 15px;padding-right:2px;”]

But it displays this instead of showing the icons.

The icon shows up fine in preview just not on the site.

How do i get it to display correctly?

Hi Ali,

Thank you for reaching out to us. You can achieve this with Headline element by enabling the Graphic Setup and choosing the icon of your choice (please follow https://theme.co/docs/headline#headline-graphics-settings)

image

Hope this helps!

Hi, i’m using an alert not a headline. How do i add the icon on the alert section? Which is using the html. How do i code it using html. The shortcode doesnt seem to work.

Hi Ali,

Thank you for the clarification, your very own shortcode actually works fine on my end with Alert element.

[x_icon type="exclamation-circle" style="font-size: 15px;padding-right:2px;"]

Please confirm the following:

  • Your PRO version is in the latest version (3.2.3)
  • When pasting shortcode (or any hardcoded code), make sure you’re on HTML editor.

Cheers!

Hi,

We are using the latest version. And when i enter it in, this is what the site shows:

I have put the html code in the content area in the alert element located in the pro header. But when in preview, the icon does show but when i hit save, it doesnt show up on the actual site. Is there another way to add the icon without the shortcode?

Hi Ali,

Thank you for the clarification, I can replicate the issue now, the issue is only happening on the Header and Footer builder, I’ve submitted this to our issue tracker so the developers will be made aware of it.

For now, please use the generated HTML mark of the exclamation mark shortcode.

<i class="x-icon x-icon-exclamation-circle" style="text-align: center; font-size: 15px;padding-right:2px;" data-x-icon-s="" aria-hidden="true"></i>

Cheers!

Thank you so much! That did the trick :slight_smile:

You are most welcome!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.