Using Extended Icons in X

[clovisd]

Hey there,

I’m trying to insert / include the icon’s available through Cornerstone into a basic post / via HTML but I’m struggling on the easiest / best way to do this.

The only way I’ve found thus far is to get the Icon code via Inspect element and insert it that way. This gives me a code snippet similar to this: <i class="e414-14 x-icon" data-x-icon-b=""></i>

I’m referring to these icons: https://imgur.com/a/KXiJz5s

I tried using the Font Awesome Shortcodes provided without any luck.

Thanks!
C

[lely]

Hi @clovisd,

You can use classic element shortcode for ICONS. Check the shortcode here.

Please also subscribe to our youtube channel here.

[clovisd]

Hello,

That is not what I’m asking. Cornerstone has an Icon selector with 100s of additional icon compared to your old / outdated Icons page you linked above. I’m trying to figure out how use those icons throughout, specifically outside the Cornerstone editor like in Blog posts etc.

Thank you for reading my initial question.

• C

[friech]

Hi @clovisd,

Regretfully, outside the builder, you need to hardcode it as you’ve already doing.

e.g.

<i class="x-icon" data-x-icon-TYPE="&#xUNICODE;"></i>

Couple of things you need to change here, first the TYPE, you need to change that to either b, o, or s

• data-x-icon-b for social icons and brands.
• data-x-icon-o for outline icons.
• data-x-icon-s for solid icons.

Second, change the UNICODE, you can refer here for the icon’s UNICODE. Make sure you only change the UNICODE and not accidentally remove the &#x and ; It might turn to  on your editor but it should be an actual icon on the frontend.

Hope it helps,
Cheers!

[clovisd]

@friech

t turn to  on

Perfect, this is exactly what I was looking for! Thank you for the help.

Hopefully X adds these icons to its shortcode builder in the future, but at least for now I have a solution.

[nabeel]

Glad we could help.

Cheers!