Font Awesome icons disappear if CSS merge/CSS processing is on

Hi,

Are you sure you haven’t done any other plugin changes on the site, other than updating FVM? Perhaps there was a theme update that affects fontawesome?

If the fontawesome paths change, you may need to purge the cache.
If paths changed and are wrong… it might work when left alone, but might not when merged. I would need to see if the file is merged properly, if the contents show up on the fvm optimized file, and if the fonts file, actually show with the correct path.

You can try to enable the “Preserve the order of CSS files”.
Purge the cache, to see if it fixes it.

Also take a look at the “view log”, does it show the fontawesome being merged with your other css code?

On google chrome, after you enable css processing, press CTRL + SHIFT + J (to open the console) and refresh the page. Are there any errors shown?

I’ve got this problem too. I have to ignore font-awesome.min.css otherwise the ::before content characters render as broken unicode.

I had a similar problem.
It was trying to access the fonts from the vm folder (I think).
Didn’t have time to study it at the top me.
Will re-check as others have mentioned it.

I have a few errors on https://www.clickspares.co.uk

icomoon.ttf and icomoon.woff it is trying to find in uploads/fvm/fonts/
It’s looking for speech-bubble.png in /uploads/fvm/images

I’ve copied them there for now as a fix.

Am I doing something wrong, or has something changed in your plugin?

Thanks,
Bruce.

@dfterry ignoring fontawesome or any other file that causes trouble, is exactly what you need to do (read the faqs please).
Sometimes files cannot be merged together because they conflict with each other… but, if the fonts render as broken unicode, is the fontawesome file properly utf-8 encoded?

Also, can you install the latest 2.1.0 version, purge the cache on the plugin settings (and all you other caches) and see if it’s working this time?

@bruceh5200
The only fontawesome reference I see on your site, is inside the https://www.clickspares.co.uk/wp-content/themes/click-spares/assets/stylesheets/foundation.css file, which got merged on https://www.clickspares.co.uk/wp-content/uploads/fvm/cache/header-f2cc0df4-1497248047.min.css

The issue that I see here, is that even though the files have been merged into that one, they don’t seem to have been processed at all (font paths are not changed and CSS is not minified at all… it’s simply merged).

Can you post a screenshot of the settings page and another one from the server info tab?

Also, can you install the latest 2.1.0 version, purge the cache on the plugin settings (and all you other caches) and see if it’s working this time?

Thanks.

I ran into this same issue today with a new site, WordPress version 4.8.1 and plugin version 2.2.1. The issue was not with fontawesome, but the Gotham font. The strange thing was that half of my fonts were working correctly while the other half were not. I was using relative paths to the fonts file in the css and changing that to the full server path to the fonts folder fixed the issue. I have other sites running the same versions of WP and the plugin that have never had this font issue.

@font-face {
    font-family: 'GothamLight';
    src: url('../fonts/Gotham-Light.eot');
    src: url('../fonts/Gotham-Light.eot?#iefix') format('embedded-opentype'), url('../fonts/Gotham-Light.woff2') format('woff2'), url('../fonts/Gotham-Light.woff') format('woff'), url('../fonts/Gotham-Light.svg#Gotham-Light') format('svg');
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
}
@font-face {
    font-family: 'GothamBold';
    src: url('../fonts/GothamBold.eot');
    src: url('../fonts/GothamBold.eot?#iefix') format('embedded-opentype'), url('../fonts/GothamBold.woff2') format('woff2'), url('../fonts/GothamBold.woff') format('woff'), url('../fonts/GothamBold.svg#Gotham Bold') format('svg');
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
}
@font-face {
    font-family: 'SourceSansPro-Light';
    src: url('../fonts/SourceSansPro-Light.eot?#iefix') format('embedded-opentype'), url('../fonts/SourceSansPro-Light.woff') format('woff'), url('../fonts/SourceSansPro-Light.ttf') format('truetype'), url('../fonts/SourceSansPro-Light.svg#SourceSansPro-Light') format('svg');
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
}
@font-face {
    font-family: 'SourceSansPro-Bold';
    src: url('../fonts/SourceSansPro-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/SourceSansPro-Bold.woff') format('woff'), url('../fonts/SourceSansPro-Bold.ttf') format('truetype'), url('../fonts/SourceSansPro-Bold.svg#SourceSansPro-Bold') format('svg');
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
}

The Gotham fonts would not load but the Source Sans Pro fonts did.

@vegaswebsitedesigns

Were the urls for the Gotham font files, showing a 404 error on the browser console?
If yes, what was the url that reported as 404, and which url should have been correct?

If some work and others not, and there are no errors…, how does the final generated css file look? Are the paths correct and do they open, when you visit the url?

Unless it’s some browser error, cache or wrong encoding on the file, I have no idea how that can happen.

EDITED:
I WAS MISTAKEN. SORRY

• This reply was modified 7 years, 2 months ago by Amin.
• This reply was modified 7 years, 2 months ago by Amin.