FontAwesome icons don’t show on desktop

  • Resolved Bob the web builder

    (@yourlive)


    5 years, 11 months ago

    Hi,

    I’m developing a website and my client insists on having a 90+ pagespeed on mobile. I achieved that with the help of your plugin. However, I got some problems with fontawesome.

    First, I used the fontawesome plugin, but that caused a 10 point drop in my pagespeed. So I decided to include fontawesome locally. That works fine on mobile, but strangly enough the icons don’t show on desktop (they do show up on mobile, also when simulating mobile in Chrome).

    If I exclude the paths to the CSS files from auto optimize they work fine, but then I get a 10 point drop on pagespeed again…

    Any suggestions?

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Optimizing Matters

    (@optimizingmatters)

    5 years, 11 months ago

    Hmmm … looks like animate.css (which is part of the Divi CSS) in the autoptimized CSS is broken somehow, resulting in following CSS not being parsed. You can confirm by (temporarily) excluding wp-content/themes/Divi/style.css from CSS optimization.

    Side-remark; you’re preloading your CSS without “above the fold”-CSS being present, leading to a flash of unstyled text, maybe have a look into the “inline & defer CSS”-option in AO instead? 😉

    groeten uit België,
    frank

    Thread Starter Bob the web builder

    (@yourlive)

    5 years, 11 months ago

    Hi Frank,

    Thanks for your quick response. Excluding wp-content/themes/Divi/style.css doesn’t fix the problem. Any other ideas? Otherwise I’ll just use images instead of icons.

    Groeten uit Nederland 😉

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    5 years, 11 months ago

    I see you’ve already removed the font-awesome calls, so yeah, (inlined) images or svg’s maybe? 🙂

    Thread Starter Bob the web builder

    (@yourlive)

    5 years, 11 months ago

    Hi Frank,

    Thanks for your quick respons. Yeah, I just added the icons as images, problem solved 😉

    Now I have to figure out which CSS I have to load above the fold to prevent the page showing without styling in the first second. Any idea how to find that out?

    Thread Starter Bob the web builder

    (@yourlive)

    5 years, 11 months ago

    Never mind, I just used AO to include all CSS in the HTML. That solves the glitch problem and boosts the Pagespeed score to 93 🙂

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    5 years, 11 months ago

    re. critical CSS extraction; the AO FAQ lists some tools.

    “inline all CSS” does work, but it makes the HTML a lot bulkier and renders the CSS un-cacheable, so it is not the best solution.

    fijn weekend gewenst!
    frank

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘FontAwesome icons don’t show on desktop’ is closed to new replies.