HTML le bouton avec l'icône de recherche?

Je suis en train de créer un bouton de recherche contenant rien, mais la loupe de l'icône de recherche.

Code est ci-dessous

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

</span>
</form>
</div>

Après la lecture de tous les posts sur le sujet que j'ai pu trouver, j'ai également essayé les 3 options suivantes dans la ligne 4

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

ainsi que la version html de ce

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

avec ce 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;     
}

Aucun d'entre eux ont travaillé. J'ai également mis à jour de la police impressionnant sur la base de ces tutoriels
http://cirquedumot.com/font-awesome/ et http://www.youtube.com/watch?v=BdyI6T-_7ts

Toute aide sur ce que je fais mal serait très apprécié.

InformationsquelleAutor user2632376 | 2013-11-13
  1. 4

    Vous pouvez utiliser les icônes de Glyphicons ou Font-Awesome, qui sont utiles pour la conception d'icônes d'utilisation.

    Voici un exemple, en utilisant glyphicon l'icône de recherche

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

    Ou à l'aide de la Police Impressionnant de l'icône de recherche

    <button class="icon"><i class="fa fa-search"></i></button>
    InformationsquelleAutor Jeff Hu
  2. 2

    est que ce que vous cherchez
    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
}
    • Je ne sais pas ce que je fais mal. J'ai édité mon "searchbox" div et css puis copié et collé votre code html et css, et il m'a donné un vide, pas de formulaire de recherche à tous. Merci de prendre le temps de bien San, c'est très apprécié.
    InformationsquelleAutor San
  3. 1

    L'arrière-plan d'abréviation de la propriété mentionnée par veer peut-être ignoré par le navigateur comme "no-repeat" est écrit deux fois. Essayez d'écrire de cette façon:

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

    également vérifier le chemin d'accès spécifié dans l'url. si vos images sont dans un dossier distinct, vous pouvez avoir à ajouter un "../" .

    P. S.
    Bien qu'il peut ne pas être nécessaire pour votre cas, il est bon de mentionner les propriétés comme background-position(centre dans les cas ci-dessus). Parfois, sinon l'ensemble de la propriété est ignorée par le navigateur. Je ne suis pas sûr cependant pourquoi cela arrive, je ne suis sûr que si c'est réellement un problème ou c'était juste une autre erreur dans mon code. Ne se produit pas toujours, mais j'ai été confronté à ce problème 2-3 fois.

    InformationsquelleAutor Rishit Shah
  4. 0

    Bien, vous avez tout à fait raison avec le CSS. Essayez cette, puisse ce travail. Je ne suis pas sûr à ce sujet.

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

    Ajouter CSS:

    #searchButton:
{
    background:url('filepath') no-repeat  no-repeat;
    width: 20px;
    height: 20px;
    border: 0px;
}
    • Merci d'essayer de Virer. Cela m'a donné exactement ce que j'avais avant, une boîte de recherche suivie et bouton vide. J'apprécie le temps que vous avez pris.
    • Bien que cela ne devrait pas vous donner un bouton vide. Il doit avoir un fond.
    InformationsquelleAutor Veer Shrivastav
  5. 0

    Utilisation FontAwesome bibliothèque d'icônes et de mettre <i class="fa fa-recherche"></i> à l'intérieur de votre bouton de recherche.

    CSS:

    * {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;
}

    HTML:

    <!-- 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>

    • Veuillez fournir des explications dans votre réponse et éviter de poster du code seulement des réponses.
    InformationsquelleAutor Vishal