Sridhar Katakam

Genesis and WordPress Tutorials

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

by 1 Comment

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.

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:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

    • >