{"id":18465798,"date":"2025-05-14T15:28:15","date_gmt":"2025-05-14T15:28:15","guid":{"rendered":"https:\/\/wordpress.org\/support\/topic\/some-custom-icons-not-displaying-correctly\/"},"modified":"2025-05-14T15:28:15","modified_gmt":"2025-05-14T15:28:15","slug":"some-custom-icons-not-displaying-correctly","status":"publish","type":"topic","link":"https:\/\/wordpress.org\/support\/topic\/some-custom-icons-not-displaying-correctly\/","title":{"rendered":"Some custom icons not displaying correctly"},"content":{"rendered":"\n

I\u2019m having an issue but just with SOME of our custom icons which seems extra hard to troubleshoot. They are all being pulled in the same way and all part of the same kit. I reached out to Font Awesome support who said that the issue is because, “there is an extra class on there “fa-custom” that is messing things up” and to remove it. However some of the icons with the class still displayed and eventually we figured out it was because, “We were able to figure out the root issue with your custom icons. Any class that starts with “fa-” is interpreted by our javascript as something it should pay attention to, so generally you should avoid adding classes that start with “fa-” to your html.\u00a0As for the change in behavior, in our Version 6.7.0 release we adjusted how our script looks at the classes it finds on an html element. It now sorts the classes in alphabetical order before processing (to be able to handle some of our newer Duotone icons) which changed the behavior of a class like “fa-custom”. Before the release, if an unknown class starting with “fa-” came before the icon name (like “fa-coffee-table”) the icon would work but not if it came after. Now, if the icon name comes alphabetically before the unknown class name, it won’t work. So “fa-coffee-table” comes alphabetically before “fa-custom” which results in a missing icon – but a name like “fa-drapes” comes alphabetically after “fa-custom” so it will work, which explains why only some of your custom icons were having issues. Long story short, they best fix is to remove the “fa-custom” class or rename it to “custom-icon” – anything without “fa-” at the beginning.”

However because the class is coming from the ACF:fontawesome plugin I can’t adjust it. While working with FontAwesome they said, “We were able to connect with Matt, the developer of Advanced Custom Fields: Font Awesome, and he confirmed that that the extra “fa-custom” class is coming from the plugin. He suggested that you could change the “Return Value” to “Icon Object” instead of “Icon Element” to control the code that the plugin outputs so you can remove the “fa-custom” class.”

I have switched the “Return Value” to “Icon Object” and am continuing to have the same issue. Is there something else I need to do to solve this?<\/p>\n","protected":false},"template":"","class_list":["post-18465798","topic","type-topic","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/18465798","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/types\/topic"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/18465798\/revisions"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/media?parent=18465798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}