Geek Answers Handbook

HTML button with search icon?

I am trying to create a search button containing nothing but a magnifying glass search icon.

Code below

<div class="searchbox"> <form> <span><input type="text" class="search square" placeholder="Search..."> <input type="button" value="&#xf002;"> </span> </form> </div>

After reading all the related posts that I could find, I also tried the following 3 options on line 4

 <input type="button" value="filepath/icon.png"> <i class="icon-search icon-2x"> <i class="icon-search"></i></button>

as well as this html

 <input type="button" value="Search" class="button_add">

with this css

 input.button_add { background-image: url(filepath/icon.png); background-color: transparent; background-repeat: no-repeat; background-position: 0px 0px; border: none; cursor: pointer; height: 50px; width: 50px; padding-left: 16px; vertical-align: middle; }

None of them worked. I also updated the font based on these guides http://cirquedumot.com/font-awesome/ and http://www.youtube.com/watch?v=BdyI6T-_7ts

Any help on what I am doing wrong will be greatly appreciated.

+1
source share
4 answers

You can use the icons from Glyphicons or Font-Awesome , which are useful when using the icon design.

Here is an example using the glyphicon search icon

 <button class="icon"><i class="glyphicon glyphicon-search"></i></button>

Or using the awesome font search icon

 <button class="icon"><i class="fa fa-search"></i></button>
+2
source

is what you are looking for http://jsfiddle.net/cancerian73/t2FJb/

 <div class="search-bar"> <input type="text" class="sfield" name="searchterm" maxlength="30" value="Search..."> <input type="image" class="searchbutton" name="search" src="http://www.spheretekk.com/bc/images/search-icon.gif" alt="Search"> 

 .search-bar { height: 29px; background-color: #e1e1e1; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; position:relative; width:230px } .search-bar .searchbutton { position:absolute; top:23%; right:5px; } .sfield { float: left; margin: 5px 0 0 8px; font: 8pt Verdana; color: #888; height: 20px; line-height: 18px; padding: 0; background: transparent; border: 0; max-width: 125px }
+1
source

The background legend mentioned with the help of the sup can be ignored by the browser, as "no-repeat" is written twice. Try to write it like this:

background: url ("") non-repeating fixed center;

also check the path you specified in the url. if your images are in a separate folder, you may need to add "../".

PS Although this may not be necessary for your case, it is good practice to mention properties such as background-position (center in the above case). Sometimes, otherwise, the entire property is ignored by the browser. I'm not sure, however, why this is not happening, I'm not sure if this is actually a problem, or it was some other error in my code. Not always, but I ran into this problem 2-3 times.

+1
source

Ok, you are absolutely right with CSS. Try it, maybe this work. I am not sure about that.

 <input type="button" value="" id="searchButton" />

Add CSS:

 #searchButton: { background:url('filepath') no-repeat no-repeat; width: 20px; height: 20px; border: 0px; }
0
source

More articles:


All Articles