Search Widget Configuration

  • Resolved epicjono

    (@epicjono)


    5 years, 1 month ago

    Hello! This will hopefully be my last question here, at least for a while.

    This one may involve html, because I want to remove the text from the search button (value = “Search”) and somehow replace it with a search icon, preferably the same one that is built into the Period theme.

    From my research, I’d need to edit the html for that widget, but I wouldn’t know how to get the search icon from the website and put it in the submit button.

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Theme Author Ben Sibley

    (@bensibley)

    5 years, 1 month ago

    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>

    Thread Starter epicjono

    (@epicjono)

    5 years, 1 month ago

    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> ?>'/>
    Theme Author Ben Sibley

    (@bensibley)

    5 years, 1 month ago

    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 5 years, 1 month ago by Ben Sibley.
    • This reply was modified 5 years, 1 month ago by Ben Sibley.
    • This reply was modified 5 years, 1 month ago by Ben Sibley.
    • This reply was modified 5 years, 1 month ago by Ben Sibley.
    • This reply was modified 5 years, 1 month ago by Ben Sibley.
    Thread Starter epicjono

    (@epicjono)

    5 years, 1 month ago

    Alright, thanks!

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

The topic ‘Search Widget Configuration’ is closed to new replies.