Issue with icons after installing W3 Total Cache

Hello @digicloud

I am sorry about the issue you are experiencing with missing icons and I am happy to assist you with this.
Can you please share your website URL?
Can you please disable minify in Perfirmance>General settings, save all settings and purge the cache and see if the issue persists?
If the issue is gone, re-enable minify, and disable the settings in Performance>minify one by one (HTML minify, JS minify, CSS minify) and see which one might be causing the issue.
Make sure to save all settings and purge the cache after each option is disabled.
Thanks!

Hi Marko, thanks so much for getting back to me, very much appreciated. I disabled minify and cleared cache and the icons re-appeared.

So then I went to reenable it, but dont understand how to disable under Performance > minifi one by one. See the following screenshot:

https://snipboard.io/2i3ytj.jpg

I look forward to your reply.

Thanks,
Jason

Hello @digicloud

thank you for the information.
Yes, that is a correct setting page. You do not have HTML minify enabled, so scroll down, disable JS minify, save all settings, and purge the cache, see if the issue persists. If the issue is gone, then we found the source of the issue. If not, re-enable JS minify, scroll down, to CSS minify, disable CSS minify, save all settings and purge all cache.
Please let me know which of these two options might be causing the issue.
Thanks!

Hi Marko, sorry ignore my last post, I figured out which is the one that is causing the issue.

When I had CSS enabled under minifi, this is what caused the issue.

I disabled it and now can see icons.

But I would like to use this feature, I assume its a real good one to use, any further thoughts on how to enable css under minifi without the issue?

Thanks so much for your excellent support.

Hello @digicloud

Thank you very much for the information.
So the problem is that some font awesome CSS files do not agree with being minified. Most likely they are pre-minified.
There are a couple of things that you can do in this case.

1. Leave CSS minify disabled: Not the most popular solution but it is the easiest one. Test your website on Gtmetrix and check the score for CSS minify. In some cases, minifying CSS is not needed.

2. Exclude the files from CSS minify: In Performance>Minify>Advanced, There is a field in which you can add the path of the files that are causing the issue when minified “Never minify following CSS files”. You can add the path of the file/files e.g. /wp-content/icon/font-awesome/css/font-awesome.min.css. this will ensure that those files will be excluded from minifying and therefore not causing braking of the icons.

3. Manual minify: This is a bit tricky solution because you need to add the files manually and in proper order. When you switch to manual minify in Performance>General settings>Minify, you can then use the help wizard in Performance>Minify which will list all the available JS/CSS files that can be added to minify. This way you can select the files yourself leaving out the font awesome CSS files.

I hope this helps!
Let me know if you have any other questions.
Thanks!

Hi Marko, thanks again for your excellent support.

I enabled CSS and did Gtmetrix and got a 1% worse off score than if I have it disabled.

So I think I will keep it disabled at least the icons will show this way anyways and I dont lose speed ??

Thanks once again. Your plugin rocks!

You are most welcome!

We would really appreciate it if you could take a minute and post a review?here. This will help us to continue offering a top-notch product to users.
Thanks!

Hi Marko, please ignore my last comment i just fixed it.

• This reply was modified 4 years, 2 months ago by digicloud.