Using Font Awesome codes

[finkk]

Hello there,

A pure rookie query, but how do I use Font Awesome on lists in Pro? The usual markup does not work.

Kind Regards,

Spencer

[ruenel]

Hello Spencer,

Thanks for writing in!

You can use the legacy shortcode like this: [x_icon type="facebook"] and insert it in your lists.

You can check out the icon names here: https://fontawesome.com/v5.15/icons

Be very careful with the single quotes. If you use the incorrect one, the icon will not display just like that happen in this thread: Font awesome icons show as X

Best Regards.

[finkk]

Hi,

Thanks for getting back.

The icons display, but the icons on the previous Font Awesome lists would be equally spaced so the adjacent text was neatly lined up. If you have a look at the attached image, the text and phone number are slightly unaligned. This is because the phone icon is 2px narrower than the envelope.

I can manually target that phone icon to balance the spacing, but is there a correct way to do it?

Kind Regards,

Spencer

[tristup]

Hi Spencer,

Adding space between the Icon and Text will be the correct way to have the gap. Please check the screenshot given in my colleague’s post.

@ruenel

Hope it helps.
Thanks