ブートストラップ4検索入力アイコン付き

Question

BS 4はグリフコンをサポートしていないので、私はこれをどのように行うことができますか。私はそれを背景として設定するのですか、またはフォントのすばらしいアイコンに異なる位置付けを適用しますか？

これは、これまでの私のコードです：

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

私はこのfont-awesome iconを使用します。また、次のように背景画像として追加しようとしました。

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

しかし、それでも何もしません。私が考えることができる唯一の方法は、フォントのすばらしいアイコンを追加してから、絶対配置に配置することです。しかし、それが「きれいな」正しい方法であるかどうかはわかりません。私はこれに対して別のアプローチをとる必要がありますか？誰か助けて！ありがとうございました！入力グループを使用しないのはなぜ

Answer 1

あなたはまた、ASPXブートストラップv4.0.0で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

Answer 2

アップデート2018

？

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

そして、あなたはそれが国境utilsのを使用して内部入力を表示させることができます...

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

あるいは、アイコンが内側に表示されるようにinput-group-textワット/ O灰色の背景を使用して入力...

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

Demo of all 3 options

Answer 3

、無ベータ（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> 

Answer 4

を使用して、このように行うことができます

右側に検索アイコンがある入力ボックスです。

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

ここには、左側に検索アイコンがある入力ボックスがあります。

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