Font Awesome icon shortcode makes links and other text on site messed up

[TIrvine]

Hi, I have a phone, envelope, and tree icon. I’ve used the following shortcodes to make the icons appear beside their respective information.

[x_icon type=“phone”] 555-555-5555
[x_icon type=“envelope”] info@example.com
[x_icon type=“tree”] 000 Street, City

The problem is that as soon as I add hyperlinks around the actual phone number, email, and address, the link then conflicts with the shortcode and all the text appears messed up. Even text elsewhere on the site messes up into an alien language.

This is what I’m doing that’s causing an issue:

[x_icon type="phone"]   <a href="tel:5555555555">555-555-5555</a> 
[x_icon type="envelope"]   <a href="mailto:info@example.com">info@example.com</a> 
[x_icon type="tree"]   <a href="https://goo.gl/maps/eXaMpLe" target="_blank" rel="noopener">000 Street, City</a>

Is there a better way to achieve the Font Awesome icons in Pro because I think the shortcodes are causing the issue.

Thanks so much

[ruenel]

Hello Tina,

Thanks for writing in!

I have tested your shortcode inside a Text element. I could not replicate any issue.

If the icons are not displaying on your end, please go to Cornerstone > Theme Options > Miscellaneous and make sure that the Font Awesome is enabled.

By the way, as an alternative, you can actually use the Button element and display both the icon and the link. Check out this example here:

Icon Shortcode vs button element with icons

Best Regards

[TIrvine]

Thank you so much for your response @ruenel. I’m not sure why it did what it was doing, but the text/code is working fine now…?
I did have Font Awesome enabled
If I have any further issues with it, though, I’ll switch over to the button for sure.

Thanks again

[tristup]

Hi Tina,

Glad that we are able to help you.

Thanks