Custom Icons not working with version > 4.0.6

  • Resolved joshuavb

    (@joshuavb)


    5 months, 2 weeks ago

    Hello, long time user of the plugin!

    I see some other support topics that are similar to this, so hoping it’s related, but our issue is slightly different than anything else I’ve read about. We have some custom icons that we pull in from the Kit, that stopped rendering when we upgraded beyond 4.0.6.

    The previously outputted HTML that works looks like this:
    <i class=”fak fa-furnace-dark” aria-hidden=”true”></i>

    After the update, the outputted HTML that is now broken looks like this:
    <i class=”fa-classic fa-fak fa-furnace-dark” aria-hidden=”true”></i>

    If I remove the “fa-classic” and replace “fa-fak” with “fak” so that the HTML looks the same as it used to, everything works again. Obviously this is not a full-time solution, so for now we’ve rolled things back to 4.0.6 but would very much like to keep things up to date.

    Let me know if you need any other info from my end!

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

    (@mattkeys)

    5 months, 2 weeks ago

    Thanks I’ll take a look.

    Plugin Author Matt Keys

    (@mattkeys)

    5 months, 2 weeks ago

    FontAwesome has moved to a “family + style” categorization of their icons to accommodate more icon variety. Supporting this new concept has made things a bit tricky in this plugin.

    So the new way to express these custom upload icons would be: fa-kit fa-custom-icon-name

    or if it is a duotone custom icon: fa-kit-duotone fa-custom-icon-name

    It looks like this is working in the plugin with icons that are newly selected icons when v4.0.8 is installed. However the bug seems to be with prior selected custom icons. I’ll see what I can do to put in a fallback for these older icons.

    If you have a small amount of icons and you want to use v4.0.8 now, you can unselect/save/reselect your custom icons and they should work. However if you have a large amount of custom icons in use you might want to just wait for v4.0.9.

    Plugin Author Matt Keys

    (@mattkeys)

    5 months, 2 weeks ago

    Okay it is looking like the solution here is going to be a small edit to /advanced-custom-fields-font-awesome/assets/inc/class-ACFFA-Loader-6.php on line #646

    Old code:

    case 'custom':
    	$default_family = 'kit';
    	break;

    New code:

    case 'custom':
    case 'fak':
    	$default_family = 'kit';
    	break;

    This will go out in 4.0.9 but that probably won’t come out today, feel free to make this adjustment manually if you’d like, or you can just wait until 4.0.9 to update.

    Thread Starter joshuavb

    (@joshuavb)

    5 months, 2 weeks ago

    Really appreciate the fast response, it’s really nice to see a plugin author be so responsive.

    We’ll hold on to our 4.0.6 version and wait for the 4.0.9 fixes I think – again thanks for your help.

    Plugin Author Matt Keys

    (@mattkeys)

    5 months, 1 week ago

    This should be fixed in 4.0.9 just released, let me know if you run into other issues.

    Matt

    Thread Starter joshuavb

    (@joshuavb)

    5 months, 1 week ago

    Thanks @mattkeys! We have updated the plugin and can confirm things are now fixed.

    Appreciate your support on this.

    Thread Starter joshuavb

    (@joshuavb)

    4 months, 4 weeks ago

    Hey @mattkeys, thanks so much for your help and rapid responses – I’ve sung your praises many times to colleagues at this point!

    We found an additional issue with our custom icons that still seems to be present in version 4.0.9. When we roll back to 4.0.6 the issue goes away, so we’re confident it is related.

    This current thread is marked Resolved, so if you’d like me to open a new one that’s totally fine – I want to respect your support system (just let me know).

    To make it easy to debug, we’ve downgraded to 4.0.6 on our Production site but kept 4.0.9 on our Staging site we can compare between them. In both examples below the icons are just below the Hero area in the blue boxes:

    Production (4.0.6) – https://reliancehomecomfort.com/cambridge/plumbing/
    Staging (4.0.9) – https://reliancehcstg.wpenginepowered.com/cambridge/plumbing/

    You’ll see in 4.0.9 that the icons are not working as expected, they do output something but they are messed up and I think I know why.

    On 4.0.6 the class is “fak fa-icon-name” and on 4.0.9 the class is “fa-kit fa-fak fa-icon-name”. When we switch the class using Inspect on 4.0.9 back to “fak fa-icon-name” everything goes back to normal, so that was the clue. It looks like in the CSS there is a line “i.fak” is “font-weight: 400 !important” and that is not present in the new class set. What is happening is the browser is applying pseudo-bolding which is messing up the line work. When we add “font-weight: 400 !important” to the .fa-kit class on 4.0.9 everything returns back to normal.

    Hoping this helps! Appreciate all the support you’ve provided so far.

    Plugin Author Matt Keys

    (@mattkeys)

    4 months, 4 weeks ago

    I can’t see the staging server due to user/pass requirement. However from your description I think you are right on the money about the CSS being at issue. I’ll take a look at that.

    Plugin Author Matt Keys

    (@mattkeys)

    4 months, 3 weeks ago

    FYI this will be fixed in the next release, in the meantime feel free to add font-weight: 400 !important as a workaround or just stick with 4.0.6 until the next release.

    Thread Starter joshuavb

    (@joshuavb)

    4 months, 3 weeks ago

    @mattkeys thanks so much for sticking on this, we look forward to the latest version!

    Plugin Author Matt Keys

    (@mattkeys)

    4 months, 3 weeks ago

    Looking at this a bit further today, it actually isn’t really the place of this plugin to change this CSS.

    The change should happen in your theme. There are two points you could chose to fix this. The button.btn element in your theme is getting this CSS giving it a font weight of 600. This would break the icons.

    button.btn {
        font:600 16px/18px Museo Sans,sans-serif;
    }

    However elsewhere in your CSS you have this rule:

    i.fak {
        font-weight:400!important
    }

    This overrides the font weight 600 applied earlier. However as you noticed this fix is no longer working in the latest version of this plugin, because the .fak class no longer targets the icon with the new Family + Style format of Font Awesome.

    So you could either avoid giving a font weight of 600 to this area in the first place. Or you could update your fix to target the new CSS selector for the icon.

    I hope this helps.

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