Replace font icon with an image?

  • Is there any way with the free or pro version to replace the hamburger icon with an image? I’ve spent a while searching this forum and the knowledge base but came up empty-handed.

    I’ve been using a simple responsive hamburger menu on my site, and it works well. But now I’m optimizing the site using Pagespeed Insights in preparation for Google’s May 2021 incorporation of site performance in ranking. I’ve observed that Shiftnav is downloading the 77KB fontawesome-webfont.woff2, just to get access to the hamburger icon.

    A .png of that icon takes about 200 bytes, and Apache Modpagespeed would incorporate those 200 bytes directly in the HTML download.

    Given the importance of good ranking, I’d pay a fair bit for such a pro feature that would eliminate 77KB.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter johnrellis

    (@johnrellis)

    Here’s how I ameliorated the download size:

    I installed the free FrontForge font editor. Using FontForge, I edited

    wp-content/plugins/shiftnav-responsive-mobile-menu/assets/css/fontawesome/fonts/fontawesome-webfont.woff2

    and deleted every glyph except the hamburger icon (F0C9), reducing the .woff2 to just 876 bytes.

    Doing a few similar optimizations together increased my Pagespeed Insights score by 15 points.

    I had the same problem and used fontello instead of FontForge. Worked great and increased my speed by around 20 points

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Replace font icon with an image?’ is closed to new replies.