How do I add the search icon into the search form?

Search Form

Search Form

Adding the search icon as a search button into the Beaver Builder child theme’s search form. Beaver Builder theme is enqueuing the Font Awesome CSS. So I am using Font Awesome for search icon. Sharing the complete steps what I did on my site (see the search widget at right sidebar).

Step 1

Copy the “searchform.php” file from bb-theme folder and put into your child theme folder. Now open the file and replace the full HTML code with this new code:

Step 2

Open the style file of your child theme and add this CSS:

/*
 Search Form
---------------------------------------------------------------- */

.fl-search-form {
    background: #fcfcfc;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    display: -webkit-box;
  	display: -webkit-flex;
  	display: -ms-flexbox;
  	display: flex;
  	-webkit-box-pack: justify;
  	-ms-flex-pack: justify;
    -webkit-justify-content: space-between;
  	justify-content: space-between;
}

.fl-search-form input.fl-search-input[type="text"],
.fl-search-form .fl-search-btn {
    background: none;
    border: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
  	-webkit-box-flex: 1;
  	-webkit-flex-grow: 1;
  	-ms-flex-positive: 1;
  	flex-grow: 1;
}

.fl-search-form .fl-search-btn {
    color: #999;
}

.fl-search-form .fl-search-btn:hover,
.fl-search-form .fl-search-btn:focus {
    background: none;
    border: none;
    color: #666;
}

3 Comments

  1. piet on January 17, 2017 at 9:46 pm

    sorry sorry

    i have placed the css in the beaver extender from cobalt apps, en now it’s ok

  2. piet on January 17, 2017 at 9:40 pm

    hello i have done this action, but it look different on my test site
    testweb.onderderodeparaplu.nl

    BR Piet

Leave a Comment

You must be logged in to post a comment.

Newsletter

Get free weekly PRO Beaver Builder Tutorials

shares