Hi, I wonder if it’s possible to enable users to pick or add FA icons via ACF? Cause my understanding is Pro is using the latest version of FA.
I understand there’s no symbol dropdown option in ACF, however what I’m thinking of is user is able to copy the class code from FA and paste it into the ACF and Pro will read it and display the appropriate icon.
Hello Omar,
Thank you for the inquiry.
Yes, it’s possible to save the Font Awesome HTML as an ACF field value, but I’m not sure if there’s a way to pull or render it using the CS Builder. Why not use the Icon element directly?
Best regards,
Ismael
Hi @Ismael,
The ACF is being used in a layout, so they’re a section where I have multiple icon boxes, and each box needs a icon that matches with the content.
Although CS uses FA, it seems they’re not using the classes to call the icons? as in the image above, it says all I need to use is fa-light and fa-cloud, however adding those classes does nothing.
Thank you for the update.
While the theme uses Font Awesome, it doesn’t actually load the whole library in the front end. It either loads the icons as SVG or as a Webfont and the icon is directly saved in an attribute (data-x-icon-s) like follows:
<i class="x-icon e131-e6 m3n-4n m3n-4o m3n-4p" aria-hidden="true" data-x-icon-s=""></i>
This is why using the element with the icon class name doesn’t work. You may need to extract the actual icon markup, save it in your ACF field, or manually register the Font Awesome library. Hope this clarifies things a bit.
