I am an independent WordPress web consultant with 10 years of experience in WordPress theme installation, customization, administration, maintenance, support, documentation, troubleshooting and PSD/design to WP.
Love this tutorial – what if I wanted to use the icon but also use custom text instead of “Search this website”? I tried that a couple of different ways but kept messing up the icon.
That’s what I was using, but it’s essentially the same function as you posted above for the icon. I’m saying I want to use the FontAwesome icon AND change the custom text within the same search box. I couldn’t find a way to do both.
Ah, now I see what you’re saying and I’ve got it working. Thanks for clarifying, and thanks (as always) for another great tutorial!
Awesome stuff Sridhar. The code works like a dream on my sites. I am interested in learning how to include icons from font awesome on other sites I make. Do you have any articles on this?
I’d also suggest adding the following with the appropriate padding depending on how you style the search button. I added a background behind the search button, so this is what ended up working for me. What this does is prevent the text from overflowing behind the search icon.
Sridhar, I have added this code to my sidebar and the text ‘Search this website’ is no longer centred. There is less padding on the top. i have tried a few things and nothing has worked. Have you got any ideas how I could create equal space above and below the text?
Good tutorial, Sridhar. What if I want to change the background of the search form? Whenever I change the forms background it changes also the comments form background. How can I separate the two forms?
Any thoughts on the potential of adding the built in dashicons – the search icon (content: “\f179”;)? Would it be possible? That way you would not have to enque more fonts.
Very good tut! But i was looking for the same in ithemes builder theme. Cannot find anything on that one. Do you have an example how to do this in ithemes?
Awesome but I would recommend you to better use a lighter option
For example: https://icomoon.io/app/#/select and you can select just the icons YOU WILL USE, rather than have a heavier site.
I mean some tips that will help you harmed pagespeed:
1) Add the css rules to your style.css rather than adding another CSS which will reduce your render time
2) A page like icomoon to only serve the icons you will use. Awesom fonts tend to be quite heavy. 89kb i think or i dont remmember compared to 2-3KB that you can add either to your style.css or you can serve but lighter (I know cache later on will help but its always nicer to have as light as possible your site)
Love this tutorial – what if I wanted to use the icon but also use custom text instead of “Search this website”? I tried that a couple of different ways but kept messing up the icon.
Have you tried using the “genesis_search_text” filter per http://my.studiopress.com/snippets/search-form#input-box? I just tested and it is working fine.
That’s what I was using, but it’s essentially the same function as you posted above for the icon. I’m saying I want to use the FontAwesome icon AND change the custom text within the same search box. I couldn’t find a way to do both.
The filter used in this tutorial is “genesis_search_button_text”. That is to change the search button text.
The filter used to change search text is different. It is “genesis_search_text”.
Ah, now I see what you’re saying and I’ve got it working. Thanks for clarifying, and thanks (as always) for another great tutorial!
Awesome stuff Sridhar. The code works like a dream on my sites. I am interested in learning how to include icons from font awesome on other sites I make. Do you have any articles on this?
See if these help:
http://genesisdesignr.com/font-awesome-icons-genesis-menu/
http://wpspeak.com/load-font-awesome-icon-font/
http://webendev.com/add-font-awesome-icons-to-wordpress/
http://astronautweb.co/snippet/font-awesome/
If not, let me know.
Top man, that will get me started.
I’d also suggest adding the following with the appropriate padding depending on how you style the search button. I added a background behind the search button, so this is what ended up working for me. What this does is prevent the text from overflowing behind the search icon.
.search-form input {
padding-right: 52px;
}
[…] which when clicked becomes wider while combining ideas from my other articles on search form (1, 2 and 3) in […]
Sridhar, I have added this code to my sidebar and the text ‘Search this website’ is no longer centred. There is less padding on the top. i have tried a few things and nothing has worked. Have you got any ideas how I could create equal space above and below the text?
http://sebgates.com/blog/
Good tutorial, Sridhar. What if I want to change the background of the search form? Whenever I change the forms background it changes also the comments form background. How can I separate the two forms?
Any thoughts on the potential of adding the built in dashicons – the search icon (content: “\f179”;)? Would it be possible? That way you would not have to enque more fonts.
http://www.sridharkatakam.com/add-magnifying-glass-icon-font-using-dashicons-search-button-genesis/
[…] Answers http://www.sridharkatakam.com/adding-search-form-input-button-icon-inside-input-box-genesis/#comment-766… […]
Good one! I was trying to use :after and getting no where! 🙂
Isn’t possible at all to use an image instead of a text icon?
[…] Related: http://www.sridharkatakam.com/adding-search-form-input-button-icon-inside-input-box-genesis/ […]
Thank you for creating this article.
Very good tut! But i was looking for the same in ithemes builder theme. Cannot find anything on that one. Do you have an example how to do this in ithemes?
Awesome but I would recommend you to better use a lighter option
For example: https://icomoon.io/app/#/select and you can select just the icons YOU WILL USE, rather than have a heavier site.
I mean some tips that will help you harmed pagespeed:
1) Add the css rules to your style.css rather than adding another CSS which will reduce your render time
2) A page like icomoon to only serve the icons you will use. Awesom fonts tend to be quite heavy. 89kb i think or i dont remmember compared to 2-3KB that you can add either to your style.css or you can serve but lighter (I know cache later on will help but its always nicer to have as light as possible your site)