Icon-Schriftart in Texteingabe

Question

Wie man eine tolle Icon-Schriftart in den Bootstrap-Eingabe-Text einfügt, der links und mit einem Rand-rechts relativ zum Platzhaltertext mittels Bootstrap ausgerichtet ist? Im tun wie folgt aus: https://jsfiddle.net/tbeay2vd/1/ und mit der Bootstrap-Klasse „Input-group-Addon“ es funktioniert, aber ich möchte wie eine Eingabe von Text haben:

Wissen Sie, wie das Bootstrap mit zu tun?

Html:

<div class="container"> 
    <div class="row justify-content-center"> 
    <div class="col col-md-7"> 


     <div class="input-group"> 
     <div class="input-group-addon"><i class="fa fa-search"></i></div> 
     <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Search..."> 
     </div> 

    <!-- How to do this input text below using bootstrap ? --> 

     <div class="example"> 
      <i class="fa fa-search"></i> Search.. 
     </div> 


    </div> 
    </div> 
</div> 

Answer 1

Versuchen Sie folgendes:

$('input').on('focus', function() { 
 
    $(this).parent().addClass('active'); 
 
});

.example { 
 
    margin-top:30px; 
 
    border:1px solid gray; 
 
    border-radius:4px; 
 
    padding:15px; 
 
} 
 
.example >i { 
 
    margin-right:10px; 
 
} 
 
.search-input { 
 
    border: none; 
 
    width: 90%; 
 
} 
 
.search-input:focus{ 
 
    outline: none; 
 
} 
 
.example.active { 
 
border-color: #80bdff; 
 
} 
 
.search-box .input-group-addon { 
 
    background: none; 
 
} 
 
.search-box input { 
 
    border-left: none; 
 
} 
 
.search-box.active .input-group-addon { 
 
    border-color: #80bdff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row justify-content-center"> 
 
    <div class="col col-md-7"> 
 

 
     <div class="input-group search-box"> 
 
     <div class="input-group-addon"><i class="fa fa-search"></i></div> 
 
     <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Search..."> 
 
     </div> 
 
    
 
    <!-- Hpw to do this layout using bootstrap ? --> 
 

 
     <div class="example"> 
 
      <i class="fa fa-search"></i> 
 
      <input type="text" class="search-input" id="inlineFormInputGroup" placeholder="Search..."> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</div>

Answer 2

.input-group >.fa{ 
 
    position: absolute; 
 
    z-index: 10; 
 
    top: 37%; 
 
    left: 20px; 
 
} 
 
.input-group .form-control{ 
 
    padding-left: 40px; 
 
    height: 60px; 
 
    border: black solid 1px; 
 
    position: relative; 
 
    border-radius: 5px!important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row justify-content-center"> 
 
    <div class="col col-md-7"> 
 
     <div class="input-group"> 
 
     <i class="fa fa-search"></i> 
 
     <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Search..."> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>