Support » Theme: Period » Search Widget Configuration

  • Resolved epicjono

    (@epicjono)


    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)

    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)

    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)

    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 2 months, 1 week ago by Ben Sibley.
    • This reply was modified 2 months, 1 week ago by Ben Sibley.
    • This reply was modified 2 months, 1 week ago by Ben Sibley.
    • This reply was modified 2 months, 1 week ago by Ben Sibley.
    • This reply was modified 2 months, 1 week ago by Ben Sibley.
    Thread Starter epicjono

    (@epicjono)

    Alright, thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.