Font Awesome SVG Errors

[jnlinn]

Hello, I am using the latest version of WordPress and Pro with Integrity theme.

I am trying to optimize my site for speed. I only have “Solid” font awesome icons activated. I tried changing the Font Awesome load type to “SVG”.

1. All SVG icons create an HTML validation error " Element div not allowed as child of element span in this context". How do I fix this error? Here are a few examples:

2. SVG code is added to every menu and submenu even if it does not have a sub-indicator. This adds a tremendous amount of unnecessary code. How do I remove SVG code from menus/submenus that do not have a sub-indicator? Here is an image of my navbar menu which only has three sub-indicators:

Here is an image of HTML code:

Here is the URL to view live: https://www.bellafsm.com/industries/carpet-cleaning-software/

Please advise. Thank you.

[ruenel]

Hello @jnlinn,

Thanks for writing in! Please go to Cornerstone > Theme Options > Miscellaneous > Font Awesome and change the “Load Type”.

Best Regards.

[jnlinn]

Hello,

Font Awesome “load type” Webfont causes my site to load very slow. I have tried using a CDN and other methods to fix the performance issue but nothing works.

Font Awesome “load type” SVG fixes the performance issue, however it creates all of the HTML validation issues I mentioned previously.

Using Font Awesome load type SVG, how do I fix HTML validation errors and the SVG code attaching to every menu/submenu?

Best regards

[charlie]

We’ll update the SVG icons to not use a div tag there in the navigation bar. You can probably ignore the HTML validation issues for now. Thanks for sending this our way, have a great day.

[jnlinn]

Thank you. In addition to the navbar, the SVG icons are causing HTML validation errors in the content. The validation error is a div tag inside a span tag.

I was able to find the root cause in /pro/cornerstone/includes/views/partials/graphic.php. I changed line 154 from echo cs_tag(‘span’, $atts, $content ); to echo cs_tag(‘div’, $atts, $content );

This successfully eliminated the HTML validation errors. Can this fix be added to a future release?

However, the HTML validation errors of a div tag inside a span tag still exist for the menu items. I cannot find where the output is coming from for the SVG icons in the nav bar. Can you please advise on this?

Best regards

[ruenel]

Hey @jnlinn,

@Charlie has noted your issue as a bug and investigating the issue already. A patch release will be rolling out anytime soon.

Please bear with us.