Font Awesome breaks admin

  • Resolved John Huebner

    (@hube2)


    5 years, 11 months ago

    I use Font Awesome 5 (including the FA4 Shim) on all the sites I build, including the admin. I am currently dealing with multiple plugins that all load their own version of FA in the admin using their own handles, for example, wordfence uses “wordfence-font-awesome”. If it used a standard “font-awesome” handle this would not be an issue since my enqueuing has a very low priority and it would override the version in this plugin. This multiple loading of FA not only breaks the admin of this plugin but on the site I’m currently working on 5 different versions of FA are being loaded by various plugins creating a significant performance issue for the WP admin.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support WFAdam

    (@wfadam)

    5 years, 11 months ago

    Hello @hube2 and thanks for reaching out to us!

    I recommend checking for a plugin or theme conflict. To do this, you can disable your other plugins on the site one at a time and test, or alternatively, use the Health Check & Troubleshooting plugin (https://wordpress.org/plugins/health-check/). That is a plugin you will need to install from the Plugins > Add New area.

    If you use the Health Check & Troubleshooting plugin, you can troubleshoot the site with just Wordfence enabled and the changes are only seen in the back end and not to visitors.
    After downloading that, in the plugins section under Health Check & Troubleshooting you’ll see “Troubleshoot”. Click that and you’ll be in Troubleshooting Mode, which you will see a Troubleshooting Mode button in the top admin bar, which lets you know you are actively troubleshooting. (Note about that: Clicking Disable Troubleshooting mode in that area will turn off troubleshooting when you’re done testing for the conflict at the end.)

    With Troubleshooting mode active, in the plugins section, you will see Enable while troubleshooting under all your plugins. Click Enable while troubleshooting under Wordfence, and your site on the backend will act as only Wordfence is enabled. Keep in mind, this doesn’t always rule out plugin conflicts, however, it can a good portion of the time.

    Once you enable the troubleshooting with Wordfence, go over to the Wordfence plugin and check to see if the issues continue.

    If they do continue, then we need to look elsewhere.

    Let me know if this helps!

    Thanks!

    Thread Starter John Huebner

    (@hube2)

    5 years, 11 months ago

    Sorry to say this, but that reply was useless.

    I have already diagnosed the issue as I described.

    Adding Font Awesome (FA) 5 to the admin on the WP site breaks FA display in wordfence.

    The reason this happens is that Wordfence uses the handle “wordfence-font-awesome-style” to add FA 4. This causes 2 versions of FA to be loaded. Because FA4 is loaded after FA5 it causes FA icons to break.

    I have solved this by dequeuing “wordfence-font-awesome-style”. However, this would not be necessary if Wordfence simply used “font-awsome” as the handle so that it would not be double enqueued in the first place.

    It is Wordfence that is causing the conflict and I was just letting you know what the conflict is and how it could easily be corrected by using a standard handle when enqueuing 3rd party assets. Do with the information what you will.

    Plugin Support WFAdam

    (@wfadam)

    5 years, 11 months ago

    @hube2

    Thanks for the information! I will pass this along to our team.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Font Awesome breaks admin’ is closed to new replies.