Calling font awesome in dynamic content from a custom field

[kellybaya]

Hi team,

I hope you are well. I have searched extensively for the answer but am still having issues. I have the following structure:

https://truecontent.icandymedia.co.nz/services/seo/

Custom Post Type: Services
Custom Field (text) name: Icon
Icon data in custom field: e0a5 (arrows-minimize)

I am creating the single layout for this post type and trying to call the font awesome icon through a text field.
<i data-x-icon="&#x{{dc:looper:field key=“icon”}};" aria-hidden=“true”>

The bullseye (f140) located in the first field shows up fine but the second which has arrows-minimize is not showing at all.

From my tests, it appears that hyphenated icons are not working as they should.

I will send you login details in my next reply.

Hoping you can help me figure this one out

Many thanks
Kelly

[tristup]

Hi Kelly,

Thanks for reaching out.
It seems that the code you are using is not a valid data-x-icon code for the fields where it is not showing. To know more about the data-x-icon codes and the way to use the icons, please go through the video.

Hope it helps.
Thanks

[kellybaya]

Hello, this is exactly what I have done. There should be no issue but it still will not display.

My code in the text box is this:

<i data-x-icon="&#x{{dc:looper:field key=“icon”}};" aria-hidden=“true”>

The data in the field key icon is e0a5 (see screenshot)

I look forward to your reply

[tristup]

Hi Kelly,

I have investigated it further and found that the e0a5 and other codes are the Premium icons of Font Awesome, which can’t be used. I would suggest you use the available free icons.

Thanks