CODEWITHSUNDEEP
htmlcss
user2632376
user2632376

Reputation: 41

HTML button with search icon?

I'm trying to create a search button containing nothing but the magnifying glass search icon.

Code is 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 posts on the topic I could find I've also tried the following 3 options in 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 have worked. I've also updated font awesome based on these tutorials http://cirquedumot.com/font-awesome/ and http://www.youtube.com/watch?v=BdyI6T-_7ts

Any help on what I'm doing wrong would be much appreciated.

Upvotes: 3

Views: 51212

Answers (6)

ubi sage
ubi sage

Reputation: 83

.Search-field {
  position: relative;
  height: 30px;
  width: 182px;
  border: 1px solid #333;
  padding: 6px 10px;
  background: #393939;
  box-sizing: border-box;
  font: 13px;
  border-radius: 5px;
  outline: 0;
  
}

.searchbar {
  position: absolute;
  bottom: 60px;
  right: 0px;
}

.Search-form {
  position: relative;
}

.Search-submit {
  position: absolute;
  background: transparent;
  width: 20px;
  height: 24px;
  cursor: pointer;
  top: 4px;
  right: 10px;
  color: #90908f;
  padding: 1px;
}
<html lang="en">

<head>

  <script src="https://kit.fontawesome.com/203b5cf7c9.js" crossorigin="anonymous"></script>
</head>

<body>

  <div class="searchbar">
    <form action="" method="post" class="Search-form">
      <input type="search" name="Search" class="Search-field" placeholder="Search...">
      <button type="submit" class="Search-submit"> <span class="fa-solid fa-magnifying-glass"><i></i></span>
                
                
            </button>
    </form>
  </div>


</body>

</html>

Upvotes: 0

Vishal
Vishal

Reputation: 288

Use FontAwesome Icon library and put <i class="fa fa-search"></i> inside your search button.

* {box-sizing: border-box;}

.form-group {
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

input {
  flex: 1 1 auto;
  font-weight: 400;
  height: calc(1.5em + 1rem + 2px);
  padding: .5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: .3rem 0 0 .3rem;
  outline: 0;
}

button {
  font-weight: 400;
  color: #ffffff;
  cursor: pointer;
  text-align: center;
  user-select: none;
  border: 1px solid transparent;  
  padding: .5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: 0 .3rem .3rem 0;
  background-color: #007bff;
  outline: 0;
}
<!-- Load an icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<form action="">
  <div class="form-group">
    <input type="text" placeholder="search...">
    <button type="submit"><i class="fa fa-search"></i></button>
  </div>
</form>

Upvotes: 0

Jeff Hu
Jeff Hu

Reputation: 744

You may use icons from Glyphicons or Font-Awesome, which are useful for icon design usage.

Here's an example, using glyphicon's search icon

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

Or using Font Awesome's search icon

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

Upvotes: 6

Rishit Shah
Rishit Shah

Reputation: 375

The background shorthand property mentioned by veer might be getting ignored by the browser as "no-repeat" is being written twice. Try writing it this way:

background: url("") no-repeat fixed center;

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

P.S. Although it may not be needed for your case it is good practice to mention the properties like background-position(center in above case). Sometimes otherwise the entire property gets ignored by the browser. I'm not sure however why this happens neither am i sure if this is actually a problem or it was just some other error in my code. Does not happen always but i have faced this issue 2-3 times.

Upvotes: 1

San
San

Reputation: 1247

is that 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
}

Upvotes: 2

Veer Shrivastav
Veer Shrivastav

Reputation: 5496

Well, you are quite right with the CSS. Try this, may this work. I am not sure about it.

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

Add CSS:

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

Upvotes: 0

Related Questions