• After the most recent update, brand icons, specifically linkedin, don’t seem to be working in the frontend although I can select them and they render ok in the gutenberg preview in the admin area. It does flash up for a moment before switching to the broken question mark in a circle.

    I’m adding the field to a repeater using the ACF API like this:

    acf_add_local_field([
    'key' => 'small_icon_list_icon',
    'label' => 'Icon',
    'name' => 'small_icon_list_icon',
    'type' => 'font-awesome',
    'parent' => 'small_list_items',
    ]);

    I did wonder if I need to specify the icon sets in the code like this:

        acf_add_local_field([
    'key' => 'small_icon_list_icon',
    'label' => 'Icon',
    'name' => 'small_icon_list_icon',
    'type' => 'font-awesome',
    'parent' => 'small_list_items',
    'icon_sets' => ['brands', 'duotone'],
    ]);

    But that seems to break things further.

    Thanks for your help and making a great plugin!

    The page I need help with: [log in to see the link]

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

    (@mattkeys)

    This isn’t a way I’ve ever attempted to use this field. I think I remember seeing in the past that you can export fields to PHP though. So perhaps it would make sense to create the field group the old fashioned way first to accomplish a few things.

    1. Make sure that things are working when you create the field group through the UI.
    2. If things are working after making the group through the UI, generate the PHP so you can see what code is produced to possibly correct any errors or omissions in your own code.

    Like I said I haven’t tried this personally so this is a bit uncharted territory. The fact that you said the icon flashes for a second and then goes away makes me feel like we are chasing down the wrong thing, and it is more of a conflict of which resources are loading on the front end.

    But doing some more testing as outlined above might help figure that out. Please share your results.

    Thread Starter timbarkerse

    (@timbarkerse)

    Hi Matt,

    You were right that the ACF settings were a red-herring. The code specifying the icon-sets did work – I’m not sure what went wrong when I tried it before. When I built the field in the UI and exported to PHP it was pretty much identical.

    I looked further at the HTML that gets output by the ACF field and it looks like this:

    <i class="fa-classic fa-brands fa-linkedin"></i>

    If I manually remove the fa-classic class it works correctly. So this is fairly easy to work around in my code. Curious if I’m doing something wrong to generate those classes or if it might be a bug in the plugin. Maybe fa-classic isn’t enabled in the kit that I’m using – I don’t have very easy access to the kit config unfortunately so I can’t check.

    Thanks for your help. My work-around is doing the trick so no immediate need for help.

    Plugin Author Matt Keys

    (@mattkeys)

    If you can share a URL to a page that was having this problem I’d be curious to look at it. The fa-classic class shouldn’t really do anything, so I’m curious to see why it does on your site.

    Thread Starter timbarkerse

    (@timbarkerse)

    The issue was here https://www.vqcomms.com/contact-us/ but of course I’ve fixed it now by removing fa-classic using PHP (and don’t want to break it again to demonstrate).

    If it’s useful, I am looking at my local version and when fa-classic is present it looks like the javascript swaps out the icon for a svg which doesn’t happen with the other icons. I’m loading FA myself so it could be the way I’m doing that or how my kit is configured. See the below screenshot from dev inspector.

    Plugin Author Matt Keys

    (@mattkeys)

    Thanks for the reply. Just to confirm, on your FontAwesome kit settings page. Do you have your kit technology set to “Web Fonts” or “SVG”?

    Even some of the icons that are working look funny/wrong to me. Such as this one in your source:

    <i class="fa-duotone fa-duotone fa-location-pin" aria-hidden="true"></i>

    That should look like this:

    <i class="fa-duotone fa-solid fa-location-pin" aria-hidden="true"></i>

    Note how yours says “fa-duotone” twice, and omits “fa-solid”?

    In your FontAwesome ACF settings, do you have the return value set to “Icon Element”? Or are you instead returning something like the Icon Object, and building your own HTML?

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.