Classic feature box icons missing

[antonyw]

On updating to version 3.2.2 of Cornerstone, the icons used on the home page of this site have disappeared: https://ptospeechanddrama.com/#student_parent_journeys

Inspecting the <i> tag for each feature, the icon to display is stored in either the data-x-icon-s or data-x-icon-o attribute. I’m assuming that’s to correspond with FA’s solid or open icon styles. Unfortunately, the CSS for the icon still uses data-x-icon to get the content of the icon:

#cs-content [data-x-icon]:before, #cs-content [class*="x-icon-"]:before {
content: attr(data-x-icon);
line-height: 1;
}

If you add the -s or -o to the content attr, the icons will display. Possibly need a couple more style declarations to account for the different variations of FontAwesome icon attributes!

I have cleared the style cache. Please let me know if you need any further info. Cheers, Ant.

[Bark201]

Im experiencing the same issue but with the social icons.

[ruenel]

Hello There,

Thanks for writing in! It appears that you are using WP Fastest Cache and you have minified the JS and CSS files. Please clear your plugin first cache before testing your site. This can cause the changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately.

@Bark201:
Make sure to clear your plugin caches and site caches. If you use CloudFlare, you will need to log in and purge your site cache as well before testing your site.

Please let us know how it goes.

[antonyw]

Hi,

Thanks for getting back to me. I have tried deleting the cache (on server and on browser) and even deactivating the WP Fastest Cache plugin from the site and the problem persists. I looked through the following file which seems to setup the various interactions of the data-x-icon selector:

/wp-content/plugins/cornerstone/assets/dist/css/site/style.css

In there are two blocks of CSS which control the content of the :before element of the <i> tag. I’m afraid I can’t give you line numbers as the CSS is minified:

#cs-content [data-x-icon]:before,
#cs-content [class*="x-icon-"]:before {content:attr(data-x-icon);line-height:1}

This looks to be the original x-icon- declaration. The following new block doesn’t have the preceding #cs-content id selector which reduces the specificity of these selectors:

[data-x-icon-o]{font-family:"FontAwesomeOutline"}
[data-x-icon-o]:before{content:attr(data-x-icon-o)}
[data-x-icon-s]{font-family:"FontAwesome";font-weight:900}
[data-x-icon-s]:before{content:attr(data-x-icon-s)}
[data-x-icon-b]{font-family:"FontAwesomeBrands"}
[data-x-icon-b]:before{content:attr(data-x-icon-b)}

You can see this in effect by inspecting an <i>:before element on the site and looking down the data-x-icon- selectors being applied.

I can’t see any way that caching could be affecting this as it’s content of an original Cornerstone asset file.

[antonyw]

There also looks to be a missing ‘fonts’ folder in the following location:

/wp-content/plugins/cornerstone/dist-app/

This folder and files are mentioned in the CSS for linking the FA webfonts:

@font-face{font-family:'FontAwesome';font-style:normal;font-weight:900;
	src:url("../../../dist-app/fonts/fa-solid-900.eot");
	src:url("../../../dist-app/fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"),
	url("../../../dist-app/fonts/fa-solid-900.woff2") format("woff2"),
	url("../../../dist-app/fonts/fa-solid-900.woff") format("woff"),
	url("../../../dist-app/fonts/fa-solid-900.ttf") format("truetype"),
	url("../../../dist-app/fonts/fa-solid-900.svg#fontawesome") format("svg")}

Adding this global CSS and copying standard FontAwesome web fonts into /wp-content/plugins/cornerstone/dist-app/fonts/ temporarily fixes the issue:

#cs-content [data-x-icon-o]{font-family:"FontAwesomeOutline";}
#cs-content [data-x-icon-o]:before{content:attr(data-x-icon-o);}

#cs-content [data-x-icon-s]{font-family:"FontAwesome";font-weight:900;}
#cs-content [data-x-icon-s]:before{content:attr(data-x-icon-s);}

#cs-content [data-x-icon-b]{font-family:"FontAwesomeBrands";}
#cs-content [data-x-icon-b]:before{content:attr(data-x-icon-b);}

Can you confirm this is the case and the fix?

[alexander]

Confirmed. This will be fixed for the next release.

[Bark201]

The latest version fixed everything for me. I am no expert but I think if you would have added a query string to font awesome it would have forced the browser to re-cache. I suspect a lot of people will complain on these icons because of the browser cache showing the old version.

[friech]

Glad the update sorted the icons on your end, we certainly appreciate the feedback.

Thanks,