web-dev-qa-db-fra.com

Recherche d'entrée avec une icône Bootstrap 4

Aucune idée de comment je peux faire cela, puisque BS 4 ne supporte pas les glyphicons. Est-ce que je le configure comme arrière-plan ou est-ce que j'applique un positionnement différent à une icône représentant une police géniale? 

C'est mon code jusqu'à présent:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<div class="form-group col-md-4">
  <input class="form-control rounded-0 py-2" type="search" value="search" id="example-search-input">
</div>
<!-- /.form-group -->

Je veux utiliser cette icône font-awesome . Et j'ai aussi essayé de l'ajouter en tant que background-image, comme dans:

.form-control {
  background-image: url('https://res.cloudinary.com/dt9b7pad3/image/upload/v1502810110/angle-down-dark_dkyopo.png');
  background-position: right center 5px;
}

Mais ça ne fait rien. La seule façon dont je peux penser est d'ajouter l'icône font-awesome et de définir le positionnement sur absolu, non? Mais je ne suis pas sûr que ce soit la manière «propre» et correcte de le faire? Dois-je adopter une approche différente à cet égard? Quelqu'un aide! Je vous remercie!

csstwitter-bootstrapbootstrap-4font-awesome
14
Retros

Mise à jour 2019

Pourquoi ne pas utiliser un input-group?

<div class="input-group col-md-4">
      <input class="form-control py-2" type="search" value="search" id="example-search-input">
      <span class="input-group-append">
        <button class="btn btn-outline-secondary" type="button">
            <i class="fa fa-search"></i>
        </button>
      </span>
</div>

Et, vous pouvez le faire apparaître à l'intérieur l'entrée à l'aide des utilitaires de bordure.

        <div class="input-group col-md-4">
            <input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">
            <span class="input-group-append">
              <button class="btn btn-outline-secondary border-left-0 border" type="button">
                    <i class="fa fa-search"></i>
              </button>
            </span>
        </div>

Ou, en utilisant un input-group-text sans le fond gris afin que l'icône apparaisse à l'intérieur de l'entrée ...

        <div class="input-group">
            <input class="form-control py-2 border-right-0 border" type="search" value="search" id="example-search-input">
            <span class="input-group-append">
                <div class="input-group-text bg-transparent"><i class="fa fa-search"></i></div>
            </span>
        </div>

Alternativement, vous pouvez utiliser la grille (row> col-) sans espacement de gouttière:

<div class="row no-gutters">
     <div class="col">
          <input class="form-control border-secondary border-right-0 rounded-0" type="search" value="search" id="example-search-input4">
     </div>
     <div class="col-auto">
          <button class="btn btn-outline-secondary border-left-0 rounded-0 rounded-right" type="button">
             <i class="fa fa-search"></i>
          </button>
     </div>
</div>

Ou préfixez l'icône comme ceci ...

<div class="input-group">
  <span class="input-group-prepend">
    <div class="input-group-text bg-transparent border-right-0">
      <i class="fa fa-search"></i>
    </div>
  </span>
  <input class="form-control py-2 border-left-0 border" type="search" value="..." id="example-search-input" />
  <span class="input-group-append">
    <button class="btn btn-outline-secondary border-left-0 border" type="button">
     Search
    </button>
  </span>
</div>

Démo de toutes les options de saisie de Bootstrap 4 icon

 enter image description here

Exemple avec des icônes de validation

59
Zim

vous pouvez aussi faire de cette manière en utilisant input-group

<div class="input-group">
  <input class="form-control"
         placeholder="I can help you to find anything you want!">
  <div class="input-group-addon" ><i class="fa fa-search"></i></div>
</div>

codeply

3
Aniruddha Das

J'ai créé une autre variante avec le menu déroulant (peut-être pour la recherche avancée, etc.) .. Voici à quoi cela ressemble:

 Bootstrap 4 searh bar with dropdown menu 

<div class="input-group my-4 col-6 mx-auto">
    <input class="form-control py-2 border-right-0 border" type="search" placeholder="Type something..." id="example-search-input">
    <span class="input-group-append">
        <button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split border border-left-0 border-right-0 rounded-0" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="sr-only">Toggle Dropdown</span>
        </button>
        <button class="btn btn-outline-primary rounded-right" type="button">
            <i class="fas fa-search"></i>
        </button>
        <div class="dropdown-menu dropdown-menu-right">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            <div role="separator" class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Separated link</a>
        </div>
    </span>
</div>

Remarque: il apparaît en vert sur la capture d'écran car le thème principal de mon site est vert.

1
Rosdi Kasim

dans ASPX bootstrap v4.0.0, pas de bêta (dl 21-01-2018)

<div class="input-group">
<asp:TextBox ID="txt_Product" runat="server" CssClass="form-control" placeholder="Product"></asp:TextBox>
<div class="input-group-append">
    <asp:LinkButton ID="LinkButton3" runat="server" CssClass="btn btn-outline-primary">
        <i class="ICON-copyright"></i>
    </asp:LinkButton>
</div>

0
Patricio Moraga

Voici un champ de saisie avec une icône de recherche à droite. 

  <div class="input-group">
      <input class="form-control py-2 border-right-0 border" type="search" placeholder="Search">
      <div class="input-group-append">
          <div class="input-group-text" id="btnGroupAddon2"><i class="fa fa-search"></i></div>
      </div>
  </div>

Voici une zone de saisie avec une icône de recherche sur la gauche. 

  <div class="input-group">
      <div class="input-group-prepend">
          <div class="input-group-text" id="btnGroupAddon2"><i class="fa fa-search"></i></div>
      </div>
      <input class="form-control py-2 border-right-0 border" type="search" placeholder="Search">
  </div>
0
zeros-and-ones