Genesis Sample Theme : How to add (Font Awesome) icon font next to search bar

[Eva Lim]

How can I add an icon font from Font Awesome next to the search box in Genesis Sample Theme?
I was hoping to add a magnifying glass icon right next to the search box.

Any help is much appreciated, thanks!

[JanHoek]

We always have Sridhar, http://sridharkatakam.com/add-magnifying-glass-icon-font-using-dashicons-search-button-genesis/

---

Hi, my name is Jan Hoek. Sure, they all say I have a big head, but I like to think it’s way too small for all my ideas.

[Eva Lim]

Hi Jan, thanks for your feedback. So I tried the code here: http://sridharkatakam.com/adding-search-form-input-button-icon-inside-input-box-genesis/
And it works perfectly for an FontAwesome icon font.

However - how do I get the icon font to appear OUTSIDE the input box, and not inside?

I've tried playing around with the position and right/left values, but the icon font is not visible as soon as it's outside the input box. Any help is much appreciated, thanks!

[JanHoek]

Just leave a comment on that post from Sridhar and he wil fix that for you. I'm sure.

---

Hi, my name is Jan Hoek. Sure, they all say I have a big head, but I like to think it’s way too small for all my ideas.

[Sridhar Katakam]

@dogstalkpoetry Where are you placing the search form? In the Header Right widget area or nav bar or Primary sidebar or..?

---

Genesis Tutorials | Follow me on Twitter

[Eva Lim]

Hi SK!

I'm a big fan of your tutorials. 🙂
The search form is in the primary sidebar.
Any help is appreciated, thank you!

[Sridhar Katakam]

http://sridharkatakam.com/adding-search-navigation-font-awesome-search-icon-outside-box-genesis/

---

Genesis Tutorials | Follow me on Twitter

[Eva Lim]

I've made a minor tweak:

.search-form input[type="search"] {
width: 85%;
}

Everything else works perfectly, thank you so much SK!
Your help is much appreciated.

[Author]

Posts