Icons not rendering with versions > 4.0.5

Hey @mhennessie,

I did make a change to this area in 4.0.8. I used to ‘prepare’ the SVG myself in this plugin. However that was causing issues with custom duotone icons not getting the proper attributes for the duotone effect. So I looked back at the FontAwesome API and I saw that the API can send the prepared SVG element which I can use instead.

I haven’t been able to reproduce the issue you are seeing, and I am trying to sort out what might be causing it. My two current theories:

1. The SVG element from the FontAwesome API is invalid for some reason. If you can share one of the icons here for testing, I can add it to my kit and see if I get the same issue.
2. This is a problem when you already have an SVG in place from before 4.0.8, and then update to that version of the plugin. One way to test this might be to unselect the icon where it is used (select another), then go back to the original icon. This should cause the icon to resave it’s attributes in the post/page meta and perhaps get the proper SVG element along the way.

Let me know if you are able to help me debug this testing out the theories above!

Below is examples of the svg as output using different versions of this plugin. If I update the plugin to anything after 4.0.5 then the <svg></svg> wrapper is missing until I re-choose the icon in the editor. So choosing the icon again in the editor works but then I have to do that on every instance across the site which is a LOT.

4.0.5 icon output:

<svg class="svg-inline--fa" viewBox="0 0 512 512"><path d="M306.5 93.6c-15.9-5-32.9-7.6-50.5-7.6C162.1 86 86 162.1 86 256s76.1 170 170 170s170-76.1 170-170c0-17.6-2.7-34.5-7.6-50.5l-8.6 8.6c3.7 13.3 5.6 27.4 5.6 41.9c0 88-71.4 159.4-159.4 159.4S96.6 344 96.6 256S168 96.6 256 96.6c14.5 0 28.6 1.9 41.9 5.6l8.6-8.6zm59.8 145c-2.8 .1-5.6-.2-8.5-.7l-2.5-.4c1.1 6 1.7 12.2 1.7 18.5C357 311.8 311.8 357 256.1 357s-100.9-45.2-100.9-100.9s45.2-100.9 100.9-100.9c6.3 0 12.5 .6 18.5 1.7l-.4-2.5c-.5-2.9-.7-5.6-.7-8.5c-5.7-.9-11.5-1.3-17.5-1.3c-61.7-.1-111.6 49.8-111.6 111.4s49.9 111.6 111.6 111.6s111.6-49.9 111.6-111.6c0-5.9-.5-11.8-1.3-17.5v.1zM256 208.2c-26.4 0-47.8 21.4-47.8 47.8s21.4 47.8 47.8 47.8s47.8-21.4 47.8-47.8c0-3.2-.3-6.3-.9-9.4l-9.7 9.8c-.2 20.4-16.8 36.8-37.2 36.8c-20.5 0-37.2-16.7-37.2-37.2c0-20.4 16.5-37 36.8-37.2l9.7-9.7c-3-.6-6.1-.9-9.4-.9h.1zm100.3-60l-43.6 43.6L305.5 149c-.9-5 .8-10.2 4.4-13.9l33.6-33.6 12.7 46.6h.1zM311 208.5l50.3 8.4c8.4 1.4 17.1-1.3 23.2-7.4L418 175.8c5.8-5.8 3.1-15.6-4.7-17.7l-46.7-12.7L353.8 98.8c-2.1-7.9-12-10.5-17.7-4.7l-33.6 33.6c-6 6-8.8 14.7-7.4 23.2l8.4 50.3-51.2 51.2c-2.1 2.1-2.1 5.4 0 7.5s5.4 2.1 7.5 0l51.2-51.2 .1-.1zm9.2-9.2l43.6-43.6 46.6 12.8L376.9 202c-3.7 3.7-8.8 5.3-13.9 4.4l-42.8-7.1v-.1z"></path></svg>

4.0.8 icon output after updating:

<path d="M306.5 93.6c-15.9-5-32.9-7.6-50.5-7.6C162.1 86 86 162.1 86 256s76.1 170 170 170s170-76.1 170-170c0-17.6-2.7-34.5-7.6-50.5l-8.6 8.6c3.7 13.3 5.6 27.4 5.6 41.9c0 88-71.4 159.4-159.4 159.4S96.6 344 96.6 256S168 96.6 256 96.6c14.5 0 28.6 1.9 41.9 5.6l8.6-8.6zm59.8 145c-2.8 .1-5.6-.2-8.5-.7l-2.5-.4c1.1 6 1.7 12.2 1.7 18.5C357 311.8 311.8 357 256.1 357s-100.9-45.2-100.9-100.9s45.2-100.9 100.9-100.9c6.3 0 12.5 .6 18.5 1.7l-.4-2.5c-.5-2.9-.7-5.6-.7-8.5c-5.7-.9-11.5-1.3-17.5-1.3c-61.7-.1-111.6 49.8-111.6 111.4s49.9 111.6 111.6 111.6s111.6-49.9 111.6-111.6c0-5.9-.5-11.8-1.3-17.5v.1zM256 208.2c-26.4 0-47.8 21.4-47.8 47.8s21.4 47.8 47.8 47.8s47.8-21.4 47.8-47.8c0-3.2-.3-6.3-.9-9.4l-9.7 9.8c-.2 20.4-16.8 36.8-37.2 36.8c-20.5 0-37.2-16.7-37.2-37.2c0-20.4 16.5-37 36.8-37.2l9.7-9.7c-3-.6-6.1-.9-9.4-.9h.1zm100.3-60l-43.6 43.6L305.5 149c-.9-5 .8-10.2 4.4-13.9l33.6-33.6 12.7 46.6h.1zM311 208.5l50.3 8.4c8.4 1.4 17.1-1.3 23.2-7.4L418 175.8c5.8-5.8 3.1-15.6-4.7-17.7l-46.7-12.7L353.8 98.8c-2.1-7.9-12-10.5-17.7-4.7l-33.6 33.6c-6 6-8.8 14.7-7.4 23.2l8.4 50.3-51.2 51.2c-2.1 2.1-2.1 5.4 0 7.5s5.4 2.1 7.5 0l51.2-51.2 .1-.1zm9.2-9.2l43.6-43.6 46.6 12.8L376.9 202c-3.7 3.7-8.8 5.3-13.9 4.4l-42.8-7.1v-.1z">				</path>

4.0.8 icon after reselecting:

<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M306.5 93.6c-15.9-5-32.9-7.6-50.5-7.6C162.1 86 86 162.1 86 256s76.1 170 170 170s170-76.1 170-170c0-17.6-2.7-34.5-7.6-50.5l-8.6 8.6c3.7 13.3 5.6 27.4 5.6 41.9c0 88-71.4 159.4-159.4 159.4S96.6 344 96.6 256S168 96.6 256 96.6c14.5 0 28.6 1.9 41.9 5.6l8.6-8.6zm59.8 145c-2.8 .1-5.6-.2-8.5-.7l-2.5-.4c1.1 6 1.7 12.2 1.7 18.5C357 311.8 311.8 357 256.1 357s-100.9-45.2-100.9-100.9s45.2-100.9 100.9-100.9c6.3 0 12.5 .6 18.5 1.7l-.4-2.5c-.5-2.9-.7-5.6-.7-8.5c-5.7-.9-11.5-1.3-17.5-1.3c-61.7-.1-111.6 49.8-111.6 111.4s49.9 111.6 111.6 111.6s111.6-49.9 111.6-111.6c0-5.9-.5-11.8-1.3-17.5v.1zM256 208.2c-26.4 0-47.8 21.4-47.8 47.8s21.4 47.8 47.8 47.8s47.8-21.4 47.8-47.8c0-3.2-.3-6.3-.9-9.4l-9.7 9.8c-.2 20.4-16.8 36.8-37.2 36.8c-20.5 0-37.2-16.7-37.2-37.2c0-20.4 16.5-37 36.8-37.2l9.7-9.7c-3-.6-6.1-.9-9.4-.9h.1zm100.3-60l-43.6 43.6L305.5 149c-.9-5 .8-10.2 4.4-13.9l33.6-33.6 12.7 46.6h.1zM311 208.5l50.3 8.4c8.4 1.4 17.1-1.3 23.2-7.4L418 175.8c5.8-5.8 3.1-15.6-4.7-17.7l-46.7-12.7L353.8 98.8c-2.1-7.9-12-10.5-17.7-4.7l-33.6 33.6c-6 6-8.8 14.7-7.4 23.2l8.4 50.3-51.2 51.2c-2.1 2.1-2.1 5.4 0 7.5s5.4 2.1 7.5 0l51.2-51.2 .1-.1zm9.2-9.2l43.6-43.6 46.6 12.8L376.9 202c-3.7 3.7-8.8 5.3-13.9 4.4l-42.8-7.1v-.1z"></path></svg>

Thanks for that extra info, should help me reproduce the issue.

Okay I see the bug. /advanced-custom-fields-font-awesome/fields/acf-font-awesome-v6.php

Line #362 should be updated to:

$path_data_element .= '<path d="' . $icon_json->path . '" />';

This is part of the fallback for older/previously selected non-duotone type icons. The code currently erroneously has $path_data_element = instead of $path_data_element .= so it is overwriting the opening <svg> element.

I’ll fix this in 4.0.9, hoping to hear back from another user about a different issue and solve them both in the same release. Feel free to do this adjustment manually if you’d like to start using 4.0.8 now.

This should be fixed in 4.0.9 just released, let me know if you run into other issues.

Matt