How To Add a Search Icon To the Search Bar

If you feel that the search bar in Headway Themes is a little bit bare and hoping to jazz it up with a magnifying glass or search icon next to search bar, here are the steps to do it.

  1. If you are looking for a nice search icon, you can go to FindIcons.com. They have a lot of nice and professional looking icons for free download.
  2. They allow you to select different size of the icons which is excellent as you do not need to resize yourself using other software.
  3. Once you have selected the search icon, add it to your wordpress media library.
  4. Continue from your wordpress dashboard, go to Appearance > Editor > custom.css and add the following customized CSS code to custom.css.

body.custom div#my-search { position: absolute; top:20%; left:75%;  }

  1. Once added, click the green button “Update File” to save.
  2. Alternatively, you can add the above CSS code to the Live CSS in the visual editor if you would like to. This method allows you to see the new position of the search icon immediately in the visual editor without toggling between the browser and the visual editor.
  3. After inserting the code, go to “Easy Hook” from your Headway option.
  4. At the “Select a Hook”, select “Customized Before Header Link” under “Header”, insert the below CSS code:

<div id="my-search"> <img src="http://mydomain.com/wp-content/uploads/2011/12/ search-button.gif" width="22" height="24" /></div>

  1. Click on “Save Changes” to save.

If you are not able to get the exact position you want after inserting the above CSS code then try adjusting the “top” and “left” values until you get the precise position you want. You can always try using px instead of % for your values. For example, use “top:25px; left:500px;”, continue trying until you get what you wanted.

Comments

  1. AnonymousAugust 21, 2012 at 7:08 AM

    go to “Easy Hook” from your Headway option.

    where do you find this? Is this in 3.0?

    ReplyDelete
  2. odebloggerAugust 22, 2012 at 1:45 AM

    The "Easy Hook" is found in Headway 2 only and not in Headway 3. But it still can be achieved using a custom block in Headway 3. Create a custom block and paste the above code in its content editor.

    You can adjust the position using the Live CSS.

    ReplyDelete

Post a Comment

Popular posts from this blog

Headway Visual Editor not Loading in the Browser

This is one of the most common problems found in Headway theme, i.e., many people faced the same problem while loading their Visual Editor (VE) - it would either took forever to load the visual editor (you see the loading icon circling continuously) or freeze with no reason. If you are having the same problem with your visual editor, you might want to check the following list first before downgrading to lower version of Headway.
Read more