Support » Plugin: Advanced Custom Fields: Font Awesome Field » Upgrading to FontAwesome 6 icons!

  • Plugin Author Matt Keys

    (@mattkeys)


    Version 4.0 of this plugin brings along with it support for FontAwesome 6 icons. If you are an existing user of this plugin there are a couple considerations you may want to think about when you upgrade.

    Backwards Compatibility with FontAwesome 4.x/5.x Icons

    The team at FontAwesome did an amazing job on their end with FontAwesome 6 backwards compatibility. If you already have icons from a previous version displaying on the frontend of your site, they will continue to work after upgrading.

    However with this plugin there are some extra complexities to consider. In the latest version of this plugin changes needed to be made in how your icon selections are stored in WordPress. This means that icon selections you made prior to switching to FontAwesome 6 need to be updated in the database. This update would need to happen when you are updating one of your post/pages that are using an icon selected with and older version of this plugin.

    ACF Font Awesome Compatibility Mode

    To make this migration easier there is a new “Compatibility Mode” which is enabled by default for users who are upgrading from a previous version of this plugin and using FontAwesome 6 icons. When compatibility mode is enabled, and you visit an admin page using an icon that needs updating, it will automatically attempt to update the icon to the newest format. These changes will be saved when the post/page is saved and the update will not need to happen again for that icon.

    However there are some cases where it may not be able to automatically update these icons

    1. The most common reason an update might not happen automatically, is that due to some limitations of the FontAwesome APIs, I am only able to update the ‘free’ icons. Pro icons will need to be manually updated.
    2. If there is no longer a direct match for an older icon in the latest version of FontAwesome (pretty rare as there are only a couple icons no longer present in FontAwesome 6)

    ACF Font Awesome Reselect Icon

    In the case that an icon is not able to be fixed automatically, this plugin will highlight the icon to let the editor know that it needs to be updated. Whenever possible it will also output the ‘style’ and the ‘name’ of the previously selected icon to help you find the best match in FontAwesome 6.

    Using FontAwesome Kits

    With FontAwesome 5.x icon sets, this plugin used the FontAwesome Pro CDN for delivering these pro icons to WordPress. Starting with FontAwesome 6.x this CDN will no longer be receiving updates for Pro icons.

    Going forward this plugin uses FontAwesome Kits which are available for both Free and Pro accounts. These kits give you additional control over how you want your FontAwesome icons loaded. And in the case of Pro accounts it gives you access to all of your Pro-only icons, and the ability to upload and use your own custom icons.

    To enable your kits in this plugin:

    1) Enter your API Key from your FontAwesome Account page into the FontAwesome Settings of this plugin:

    ACF Font Awesome API Key

    ACF Font Awesome API Key

    2) After savings your settings the page will validate your API key, and load any available kits you’ve created.

    ACF Font Awesome Kits

    3) Select the kit that you want to use with this plugin.

    Active Icon Sets

    ACF Font Awesome Icon Sets

    After upgrading to FontAwesome 6.x, it is worth revisiting your Advanced Custom Field settings for your FontAwesome icon fields. Specifically you should look at the Icon Sets option.

    This plugin will attempt to automatically enable the same icon sets you may have been using with FontAwesome 5.x. However FontAwesome 4.x users will not have made those selections.

    Additionally FontAwesome 6.x has a couple of new icon set choices available. ‘Thin’ icons, as well as the ability to use ‘Custom’ icons uploaded through your FontAwesome Pro account.

    Icon Set Builder

    ACF Font Awesome Icon Sets

    The icon set builder is now upgraded to use the new icon search tool just like the FontAwesome fields in ACF. This tool will make loading the FontAwesome settings page much quicker, and should make it easier to find the icons you are looking for.

    The icon sets created with this tool are unique to each FontAwesome version, and are not automatically converted when switching to a new version of FontAwesome. After switching to FontAwesome 6.x icons you will need to recreate any custom icon sets you want to continue using.

    • This topic was modified 6 months, 1 week ago by Matt Keys.
Viewing 15 replies - 1 through 15 (of 17 total)
  • Hello,
    Great job on matching the release of FA6!
    I’m trying to upgrade but I can’t get the API Token to work. It’s giving me the message:

    Token Validation: Please add your API token above. Save settings to validate token. Token successfully validated. Could not validate token. Please verify the token has been correctly entered.

    And it doesn’t find any kit.

    Thanks for you support.

    Plugin Author Matt Keys

    (@mattkeys)

    Hey Tom, sorry you are running into issues.

    You are seeing *all* of the error/success messages at once. These are toggled on/off with javascript, so that sounds to me like there must be a javascript error happening on the page.

    If you are familiar with your browser’s developer tools, can you check the console for any JS errors and paste them here?

    Thanks,

    Matt Keys

    • This reply was modified 6 months, 1 week ago by Matt Keys.

    That’s what I figured but there are no errors in the console. I see all fields even when I delete the API key.

    I just tried changing theme for twentytwentytwo and it’s the same. On WP 5.9

    Disabling all plugins didn’t do it.

    Also, I tested on both my local (http://) and my live server (https://) and it’s all the same.

    Thank you!

    • This reply was modified 6 months, 1 week ago by tomtomdesign. Reason: Adding testing steps
    Plugin Author Matt Keys

    (@mattkeys)

    Looking again at how those validation messages are handled, they are actually all hidden until JS turns them on as needed. So the fact that you are seeing them all makes it seem that the CSS isn’t being loaded. Or perhaps more likely, this could be a caching issue if you are upgrading from a previous version of the plugin.

    Here is a screen capture of the assets I’d expect you to see in your browser inspector (this was taken using Chrome’s inspector).

    https://mattkeys.me/assets/Screen-Shot-2022-02-09-at-3.54.40-PM.png

    How does that compare with what you are seeing on your site? If the two resources are both there, are you able to view their contents? I might not have properly ‘cache busted’ this settings.css file between releases.

    I’ll look to address that in a future release.

    You should be able to open that settings.css file in a new window and force the browser to refresh it. And I am thinking that might fix the first issue you are having with all of the success/error messages all appearing at once.

    From there you may still be having an issue with your API token, but hopefully you will get just one response in that field about your token validation. Let me know if any of that clears anything up.

    Assets are loading for ACF pro but nothing for ACF-FA

    Plugin Author Matt Keys

    (@mattkeys)

    Is there anything atypical about your installation? Like it is maybe not loading from the plugin directory or something?

    Are you able to verify the files exist on the server?

    I’d expect to at least see a 404 in the browser console that it attempted to load the assets and failed. And searching the page source in inspector for “advanced-custom-fields-font-awesome” I’d expect to see a couple hits where it attempts to load these resources.

    If you aren’t seeing any of that it makes me wonder if your installation of the plugin is somehow incomplete/corrupt. If you are able to download a fresh copy of the plugin and overwrite the copy on your server, that could potentially address an incomplete/corrupt install.

    My installation is standard, everything under wp-content, no changes there. I did do a clean install of the plugin.

    The plugin and assets actually load when I’m editing a page with icons. And the front works as well… So it’s only when in /wp-admin/edit.php?post_type=acf-field-group&page=fontawesome-settings that the assets dont’ load.

    Thanks again

    Plugin Author Matt Keys

    (@mattkeys)

    Very strange behavior you are seeing. I remember seeing a support request from you 3 months ago that also had some really strange behavior with a Select2 error that had an odd resolution.

    I wonder if you are on the WordPress Slack? It might be nice to try to debug this a bit quicker chatting there instead. https://make.wordpress.org/chat/, see the area “Joining the WordPress team on Slack”. I am on there: @mattkeys if you want to reach out there. If not I understand if you don’t want to join just to figure this out.

    I’m sure you’ve already done this but can you make sure you are on the latest WordPress and Advanced Custom Field Pro? And that your server meets the WordPress requirements? https://wordpress.org/about/requirements/.

    If you are able to see your PHP error log perhaps there is an error happening server-side that would help explain this.

    Plugin Author Matt Keys

    (@mattkeys)

    Just an update here for anyone else experiencing the issue @tomtomdesign reported above. This bug has been identified thanks to the help of another user (thanks Timen!) and an update to resolve the issue is coming soon.

    For those curious, this is currently impacting WordPress installations that are being translated from english. And causes these CSS/JS to not be loaded. I’ll update again when this is fixed.

    Plugin Author Matt Keys

    (@mattkeys)

    4.0.1 was just released to address this issue. Thanks again to everyone’s help reporting the issue, and testing the fix!

    I included fontawesome myself on the back & frontend but it doesnt work. I dont want to use the font awesome kit.

    This is what I did:
    1. Change in the options version to 6.x
    2. No token or kit selection.
    3. Tried the acf field (its empty) 🙁

    is there a way to fix this? Can’t to use the kit/cdn on this project.

    As you can see in this image the icon works but the search doesnt:
    https://devtof.nl/fontawesome.png

    • This reply was modified 5 months, 1 week ago by tatof.
    Plugin Author Matt Keys

    (@mattkeys)

    Hey @tatof,

    I’d be happy to help. This announcement thread for the new version of this plugin is getting a bit long and unfocused. Would you mind creating a new thread for this. In that new thread can you let me know what filters if any you are using with my plugin to stop the FontAwesome from enqueuing in the background, and to enqueue it yourself.

    Also you mention not being able to use Kit/CDN on this project you are working on. Please elaborate more on that as this plugin makes heavy use of the FontAwesome API and you may run into limitations there if you are for some reason not able to call out.

    sorry! i will 🙂

    Hi, fresh install of WP 5.9.2 and plugin V4.0.1. Logged into FA Pro account and entered API key to get this message: “Could not validate token. Please verify the token has been correctly entered.”

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