Class names generated by pligin not matching FA5

  • Site enqueuing FA 5.1.0
    Current WP: 4.9.8
    Current ACF Pro: 5.7.2

    Hi Matt

    I have been using the plugin for a while now and really like it. As soon as FA went to v5, I started having issues with the class generated by the plugin.

    eg. The website link I provided has three stationary links on the left hand side of the screen.

    Facebook (brand icon)
    Instagram (brand icon)
    Envelope (standard icon)

    I specified ACF to return a class name.

    It returns
    fa-facebook
    fa-instagram
    fa-envelope-o

    When I add these to my code, it does not show anything. As it is FA5, it needs either a fas or fab class as well. I check this and by changing these to

    fab fa-facebook
    fab fa-instagram
    fas fa-envelope

    Note: I chose the f facebook icon and it returned the square official (-o) when it displays. fa-envelope-o does not show anything but when I remove -o, it shows up as a solid envelope.

    Is there something I am doing wrong that will display the icons?

    Thanks in advance. Even if there is already a youtube vid that I could watch (I looked but could not find anything).

    Cheers
    Murray

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter muzKore

    (@muzoid)

    An update
    I added a text fieldso I could manually add in the classes which then populate the i tag in the link. It’s a workaround but it would be good to know what I am doing wrong as I believe the client will be expecting to add links.

    Cheers!

    Plugin Author Matt Keys

    (@mattkeys)

    It sounds like perhaps you are using v2.x of this plugin, which only supports up to the FontAwesome 4.x icon set.

    Then on the frontend you are enqueuing the 5.x icon set yourself. This mismatch is going to create some issues as these icon sets include different icons and are added to the page differently.

    If you want to use the FontAwesome 5.x icon set, there is a beta version of this plugin available that supports it, you can check out more information about it here: https://www.ads-software.com/support/topic/v3-0-0-beta2-with-fontawesome-pro-icons/

    Thread Starter muzKore

    (@muzoid)

    Hi Matt
    Thanks for your response.
    I did find that there was an enqueue script in the parent theme for FA5.1 for font awesome and I removed it via a dequeue in the child theme.
    The interesting thing is that as a test, I deactivated the ACF FA plugin and only ver 5 would load as it is being loaded by another plugin (Advanced Menu Editor Pro). When I enabled the ACF FA plugin, it also loaded 4.7.0.
    <link rel=’stylesheet’ id=’font-awesome-css’ href=’https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css?ver=4.9.8&#8242; type=’text/css’ media=’all’ /> as part of the wp_footer();.
    When I went into the plugin when choosing an icon in an ACF field group, it is adding the ver 4 FA classes. Eg. the Facebook icon in v4 uses the classes ‘fa-facebook’ where as ver 5 of FA uses ‘fab fa-facebook-f’. When I include it in the front end, the v4 FA classes are bring included and both FA 4.7.0 and 5.1 are being loaded and the icons don’t display.
    As a work around, I added an extra field in the ACF field group so that I could write in the FA v5 classes which override the icon. It’s a work around but it means the client would have to go and source the class names every time they want to change or add one.

    Thanks for your time. Really appreciate it.

    Cheers
    Murray

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Class names generated by pligin not matching FA5’ is closed to new replies.