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.
- 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.
- They allow you to select different size of the icons which is excellent as you do not need to resize yourself using other software.
- Once you have selected the search icon, add it to your wordpress media library.
- 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%; }
- Once added, click the green button “Update File” to save.
- 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.
- After inserting the code, go to “Easy Hook” from your Headway option.
- 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>
- 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.
go to “Easy Hook” from your Headway option.
ReplyDeletewhere do you find this? Is this in 3.0?
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.
ReplyDeleteYou can adjust the position using the Live CSS.