Support » Plugin: Fast Velocity Minify » Font Awesome icons disappear if CSS merge/CSS processing is on

  • Resolved stephcthomp

    (@stephcthomp)


    Hi

    Since the last FVM update I’m finding my Font Awesome icons disappearing from my WordPress site https://shrinkwrap.blog.

    I have found two ways to bring them back, using FVM settings:

    • If I turn off CSS merging (= Disable all CSS processing) the icons display normally.
    • If I turn CSS merging back on (= Enable all CSS processing), and exclude the FA file /wp-content/themes/generatepress/css/font-awesome.min.css, the icons display normally.

    I’m not keen on having core functions turned off or exclusions applied as my new default settings. I’m concerned that there is a bug causing this issue to happen, which may also be affecting my site elsewhere in less obvious ways.

    What do you think? Is this something to be looked at before the next FVM update?

    Many thanks,
    Stephanie

    • This topic was modified 2 years, 3 months ago by  stephcthomp.
    • This topic was modified 2 years, 3 months ago by  stephcthomp.
Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Raul Peixoto

    (@alignak)

    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 http://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.

    Plugin Author Raul Peixoto

    (@alignak)

    @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 http://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.

    Vegas Website Designs

    (@vegaswebsitedesigns)

    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.

    Plugin Author Raul Peixoto

    (@alignak)

    @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.

    Amin

    (@aminima)

    EDITED:
    I WAS MISTAKEN. SORRY

    • This reply was modified 2 years ago by  Amin.
    • This reply was modified 2 years ago by  Amin.
Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Font Awesome icons disappear if CSS merge/CSS processing is on’ is closed to new replies.