Font Awesome’s magnifying glass web font as search button text in Genesis

In the comments section of my old How to replace search button text with a icon font in Genesis tutorial, a user asked:

I noticed when I enqueue Font Awesome 5, the search icon from this tutorial disappears, does that have something to do with the new icons being SVG?

In this tutorial, I share the updated steps to display the search form submit button and replace the default “Search” text with a magnifying glass icon using the recently overhauled Font Awesome 5.

Screen Shot 2018 03 02 at 10.42.36 am - Font Awesome’s magnifying glass web font as search button text in Genesis

We are going to load and use Font Awesome in the “Web Fonts with CSS” mode rather than as “SVG with JS”.

While the tutorial has been written for Genesis Sample 2.3.0, it should work with a few adjustments in any Genesis theme.

Step 1

Add the following in child theme’s functions.php:

Powered by Start Fast Stay Fast Website Speed Optimization Theme by SiteNow

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

Thank you for subscribing.

Something went wrong.

Leave a Reply

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

Thank you for subscribing.

Something went wrong.