Support » Plugin: Advanced Custom Fields: Font Awesome Field » Icon Field Broken

  • Resolved karks88


    Hi, since the last update I’ve had a couple of sites where the icon field appears to be broken. It won’t let me select an icon and the formatting of the field itself is broken as well.

    Here’s a screenshot of what I’m seeing:

    On one of the two sites I’ve seen this problem, one had a mixed content warning regarding FontAwesome (though I haven’t found the culprit yet) and today’s issue turned up with no such errors.

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


    Double checking my development environment, I am not able to reproduce your issue. I’ve tested with both the latest version of ACF 4.x and 5.x (pro).

    One thing that looks a bit odd to me about your screenshot. The two input fields that appear on the screen are above the icon preview, normally the icon preview appears above the select field. Is there nothing below that preview icon? Looking in your browsers inspector, what are those two input elements above the preview icon?

    I haven’t seen this report from other users yet so there is a chance that this problem only occurs under certain circumstances unique to your environment. If you are able to further debug the issue locally it could help identify the cause and solution. Perhaps there are other active plugins causing conflicts? Or changes in your themes code (functions.php typically).


    Matt Keys

    Hi Matt, thanks for the quick reply! It is definitely strange. What you see in the screen shot is pretty much it for the field. Here’s the source code, in case anything jumps out at you:

    <div class="select2-container fa-select2 select2-container-active" id="s2id_acf-field_5992f5bace458-input" style="width: 100%;">
    <a href="void(0)">   
    <span class="select2-chosen" id="select2-chosen-3">? info-circle</span><abbr class="select2-search-choice-close"></abbr>   
    <span class="select2-arrow" role="presentation"><b role="presentation"></b></span></a>
    <label for="s2id_autogen3" class="select2-offscreen"></label>
    <input class="select2-focusser select2-offscreen" aria-haspopup="true" role="button" aria-labelledby="select2-chosen-3" id="s2id_autogen3" type="text"><div class="select2-drop select2-display-none fa-select2-drop select2-with-searchbox">   
    <div class="select2-search">       
    <label for="s2id_autogen3_search" class="select2-offscreen"></label>       
    <input autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" role="combobox" aria-expanded="true" aria-autocomplete="list" aria-owns="select2-results-3" id="s2id_autogen3_search" placeholder="" type="text">  
    <ul class="select2-results" role="listbox" id="select2-results-3">   </ul></div></div>

    The funny thing is that on both sites where I’ve found this, they’re using different themes. So perhaps it’s a plugin conflict? Among the shared plugins (all running the latest versions):

    Advanced Custom Fields PRO
    Custom Post Type UI
    Gravity Forms
    ManageWP – Worker
    Page Links To
    The Events Calendar
    TinyMCE Advanced
    W3 Total Cache
    WP DB Manager
    Yoast SEO

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


    It seems like your site may be loading an older version of the select2 library, that code looks like select2 3.x and I believe ACF pro tries to load 4.x unless 3.x is already being loaded by another plugin.

    Are you able to verify if any of the other plugins you have installed are loading Select2 3.x?

    Also, you mention this problem starting since the last update, can you confirm that rolling back to version 2.0.8 fixing this issue for you? You can download that version toward the bottom of this page:



    Here’s what I found:

    <link rel='stylesheet' id='yoast-seo-select2-css'  href='' type='text/css' media='all' />
    <script type='text/javascript' src=''></script>
    <script type='text/javascript' src=''></script>
    <script type='text/javascript' src=''></script>

    Looks like both Yoast and The Events Calendar are also trying to load this library, aside from ACF Pro.

    I also all of a sudden have a broken icon field. Please see screenshot:

    Latest WP and ACF.

    Note I also have Yoast and Events Calendar Pro as user above does.

    Plugin Author Matt Keys


    Thanks for reporting guys. Your multiple reports of the same issue helped to nail the issue down to a bug in The Events Calendar plugin.

    There is another thread talking about this issue on the official ACF forums here:

    It looks like the devs at The Events Calendar are on the case, and a fix is coming soon:

    Thanks again for reporting, I am going to mark this resolved here since the fix is on their end.

    Thanks. I reverted to an earlier version of the Events Calendar and it fixed the issue until they release a fix.

    Thanks for looking into this! Glad we at least know what the cause is.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Icon Field Broken’ is closed to new replies.