Menu icon Foundation
How can I add a search icon inside a Foundation 5 search box?

Hi. Trying to add a search function as I wish using Foundation 5 has been difficult. I just downloaded the latest foundation.css hoping that has all the fixes.

I would like to add a search icon inside the search box while, if it is not too troublesome, keeping the placeholder text (I'll drop the placeholder text if it is exclusive with the search icon). How can this be accomplished? Icon-fonts perhaps? Thanks.

search iconsearchSearch Boxicon fonts

Hi. Trying to add a search function as I wish using Foundation 5 has been difficult. I just downloaded the latest foundation.css hoping that has all the fixes.

I would like to add a search icon inside the search box while, if it is not too troublesome, keeping the placeholder text (I'll drop the placeholder text if it is exclusive with the search icon). How can this be accomplished? Icon-fonts perhaps? Thanks.

Rafi Benkual about 5 years ago

You can use the premade forms or use your own. Here it is with Foundation forms and icon http://codepen.io/rafibomb/pen/cfumb

Shawn Hansen about 5 years ago

You can postfix a button to the input field, and then just style the button to the same background-color and set border-left to none.

Our search form does this on www.uwosh.edu

William Possidento about 5 years ago

Hi Rafi,

I understand the HTML.

Do I enclose the script below between tags at the bottom of the page?


$("document").ready(function () {
$("a[href$=.pdf]").after("")

});

$(document).foundation();


Thank you,
William

Rafi Benkual about 5 years ago

William, ignore those jQuery scripts. They were just left over frm testing I was doing on something else.

William Possidento about 5 years ago

Rafi, Cool. Thanks.