Search Widget Configuration

For this change, you will want to install a Period child theme on your site. Child themes allow you to modify files in the theme without losing your changes during theme updates.

You’ll want to copy the searchform.php file from Period into your child theme. In that file, you’ll find the “Search” text inside the submit button. You can replace it with this HTML for the search icon:

<i class="fas fa-search"></i>

Thanks – I have a child theme, but when I replace the “Search” text with the code, the button has the code as its text, because that’s what in the single quotes. But if I put it there without the single quotes, I receive an error. Here are my attempts:

<input type="submit" class="search-submit" value='<?php esc_attr_e( '<i class="fas fa-search"></i>', 'period' ); ?>'/>

<input type="submit" class="search-submit" value='<?php esc_attr_e( <i class="fas fa-search"></i>, 'period' ); ?>'/>

<input type="submit" class="search-submit" value='<?php <i class="fas fa-search"></i> ?>'/>

My apologies – I remembered the submit button as a button element not an input element. In this case, the solution is to add the icon with an HTML character code, like this:

<input type="submit" class="search-submit" value=''/>

Then add the following CSS to the site so the icon renders correctly:

input.search-submit {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

Edit: The forum here is trying to render the character code so I can’t include it in the code above. I’ve added a space after the ampersand in this example below. Remove that space from the code and it will work fine on your site:

Search icon code: & #xf002;

• This reply was modified 3 years, 6 months ago by Ben Sibley.
• This reply was modified 3 years, 6 months ago by Ben Sibley.
• This reply was modified 3 years, 6 months ago by Ben Sibley.
• This reply was modified 3 years, 6 months ago by Ben Sibley.
• This reply was modified 3 years, 6 months ago by Ben Sibley.

Alright, thanks!