Icons Not Displaying In the Full Site Editor

  • Hey there,

    I’m having issues getting icons selected from any acf font awesome icon field to show up in the full site editor. The search drop down works fine to filter through icons, it displays the icons correctly. However once I select one, it doesn’t appear in the block I’m adding it to in the preview section.

    For example, if I got to add a facebook link icon to our header template nothing get’s added. If I inspect the section where it should be showing, I can see that it’s adding <i class="fa-brands fa-facebook"></i> correctly to the code. But it doesn’t look like it’s getting whatever it needs to add the :before pseudo selector.

    Everything works fine in the regular block editor and on the front end, the issue appears to be only when editing or viewing blocks in the FSE.

    I inspected the <head> section and it looks like font awesome is being added correctly in FSE instances, so I’m at a loss for why it’s not working.

    If anyone has any suggestions or might be able to help with what I may be doing wrong, that would be greatly appreciated!

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Matt Keys

    (@mattkeys)

    It sounds like all the puzzle pieces should be in place. The <i> tag of the selected icon, and the resources from FontAwesome to be able to interpret it.

    Can you share the FontAwesome resource URL you are seeing in the <head> section?

    Are there any console errors?

    Thread Starter kicksite

    (@kicksite)

    Hey @mattkeys ,

    Thanks for getting back to me!

    Sure thing, they are:

    <link rel="stylesheet" id="acf-input-font-awesome-css"  media="all">

<script src="https://kit.fontawesome.com/{my-kit-id}.js" id="font-awesome-kit-js"></script>

<script id="acf-input-font-awesome-js-extra">
var ACFFA = {"major_version":"6","v5_compat_mode":""};
</script>

<script src="https://agility-2.local/wp-content/plugins/advanced-custom-fields-font-awesome/assets/js/input-v6.js?ver=4.0.6" id="acf-input-font-awesome-js"></script>

<script crossorigin="anonymous" src="https://kit.fontawesome.com/1eb314482a.js?ver=6.5.3" id="acffa_font-awesome-kit-js"></script>

    Those were all the things I could find related to ACF Font Awesome. There are also two shims for the CSS but they are very long, so I figured it was safe to leave them off.

    Thanks again!

    Plugin Author Matt Keys

    (@mattkeys)

    Nothing is standing out to me as odd there. Does the javascript console in your inspector show any errors trying to load any of those resources, or any other errors that could be related?

    Thread Starter kicksite

    (@kicksite)

    Unfortunately, it doesn’t look like there any console errors that are related to font awesome at all. There’s a few errors for our css.map files I need to clean up, but that’s about it.

    I’ve attached a screenshot in this folder of what I’m seeing https://drive.google.com/drive/folders/1hpeEf7lVQJlw5OzzIQlHCeXvbhAeXied?usp=sharing.

    Plugin Author Matt Keys

    (@mattkeys)

    I have two thoughts, but not great confidence in either of them. But probably worth saying anyways..

    The only console errors that looks like it could cause issues, would be the uncaught syntax errors. It doesn’t look like it is related to the FontAwesome stuff, but I have had those types of errors stop other JS on the page from executing. Low likelihood that this is the actual problem but worth looking at for a moment.

    My other thought. I don’t have access to a ‘block theme’ that uses the full site editor that you are using right now. But I wonder if it is working within some kind of iframe that maybe doesn’t have access to the FontAwesome resources that are perhaps ‘one container up’ outside of the iframe itself. Not sure how the full site editor works so this could be way off base.

    If this is a problem between this plugin and the full site editor you are using I’ll probably need to set myself up with a test environment so I can see in more detail what is happening. I grabbed a random block theme last night and tried to assign some ACF fields but it wasn’t immediately obvious to me how that works yet. I’ll have to do some reading.

    Thread Starter kicksite

    (@kicksite)

    @mattkeys

    Thanks for the suggestions! I will look into resolving those other console errors to see if they could be the culprit.

    You are absolutely correct about how the full site editor version works. I inpsected the my template homepage and the preview is being created and shown inside of a iframe container. I checked the iframe <head> and it doesn’t look like the font awesome script is being enqueued into the iframe preview. At least this is how it appears to be working at first glance.

    It’s not a site breaking issue or anything for us since this theme is mostly only managed in house. Once again I appreciate you taking the time to dig into this!

    Plugin Author Matt Keys

    (@mattkeys)

    As a proof of concept, you could hardcode the FontAwesome KIT in your theme head. and then view the site through the editor. If the icons start working then it seems the iframe bit I mentioned earlier is the culprit.

    As a workaround you could set the “enqueue font awesome” option in your ACF group settings to “no”, and do the enqueuing yourself.

    Let me know if you try that and how it turns out.

    Thread Starter kicksite

    (@kicksite)

    Awesome, I will try those options and let you know how it goes. Thanks again!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Icons Not Displaying In the Full Site Editor’ is closed to new replies.