Adding a Magnifying Glass Icon to Search Bar

[alethamcmanama]

Hi,

My client wants to add a magnifying glass icon to the search bar on this site (Enterprise Pro child theme):

http://srinikahealing.com/draft/

How would I go about adding this to the style sheet?

Thanks, in advance, for your help.

Warmly,
Aletha McManama

http://srinikahealing.com/draft/

[Brad Dalton]

Try adding a dashicon

---

Tutorials for StudioPress Themes & WooCommerce.

[alethamcmanama]

Brad,

I added the hour-glass icon to the theme's stylesheet, but it did not work. Here's the code I found and added it to. Is this the right place to add it? I noted below (in a box) the code I needed for the hour-glass icon.

.genesis-nav-menu > .search input {
font-size: 12px;
font-color: #810220;
background color: #F1ECD8;
content: "\f179";
padding: 6px 22px;
}

Thanks for your help.

Warmly,
Aletha

[Brad Dalton]

There's 2 steps

Load the dash icons using PHP code

Then add CSS to the class you want to use them with.

---

Tutorials for StudioPress Themes & WooCommerce.

[alethamcmanama]

Brad,

That worked. I like the search form with the hour-glass icon in it.

One last question, please:

When I type text in the search form box, it cuts off the bottom of the text. I tried to locate the style code to increase the height, but couldn't locate it. Can you let me know where you would code it in the style sheet? I tried to add it to the style code below, but it would remove the hour-glass icon. Here's the link to the home page again:
http://srinikahealing.com/draft/

.nav-primary .search-form input[type="search"] {
    width: 160px;
    }

.nav-primary .search-form input {
    content: "\f179";
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    font: normal 16px/1 'dashicons';
    vertical-align: top;
}

I'm almost there! Thanks.

Aletha

[alethamcmanama]

Brad,

Also, my client has requested the hour-glass icon show as right-aligned inside the search block. Tried adding 'align: right;' to the above CSS code, but that did not work. Help with this question too, please?

Look forward to hearing back from you on this. Thanks!

Warmly,
Aletha McManama

[Brad Dalton]

Try

float: right;

---

Tutorials for StudioPress Themes & WooCommerce.

[alethamcmanama]

Brad,

Your CSS code above did not work when I added it to any of the code above in my earlier message. What happened is the search button moved in front of the text field instead of the magnifying glass moving to the right inside of the text field. Any other ideas on how to make this work?

Help!

Thanks.
Aletha

[Graham]

Is this resolved?

I see a magnifying glass ( not hour glass) aligned right - but perhaps still a need to increase height?

The following padding tidied it up a bit for me

.genesis-nav-menu > .search input {
    padding: 5px 28px 5px 8px;
}

and to push the glass icon down a bit, I increased the top by a couple of pixels

.genesis-nav-menu .search-form input[type="submit"] {
   top: 6px;
}

---

My JustGiving page: https://www.justgiving.com/helping-graham-give

[Author]

Posts