Dodaj glypphicon markera lokalizacja wewnątrz obszaru wprowadzania tekstu

Question

im przy bootstrap i próbuje dodać znacznik lokalizacja glyphicon wewnątrz elementu wprowadzania tekstu

próbowałem dodając klasę glypicon do obszaru wejściowego jak ten:

<input type="text" class="form-control glyphicon glyphicon-map-marker" > 

Podam przykład na W3Schools z gliffami z botostrapami. Przykład zawierał znacznik gliforficzny wewnątrz elementu <span> NIE wewnątrz "elementu", wierzę więc, że moim problemem jest os.

Im próbuje osiągnąć następujący wygląd:

The example website where I got the image from wykorzystuje znacznik lokalizacji jako tapetę w ich css ...

background-image: url(data:image/png;base64); 

jakieś rady co do sposobu rozwiązania ten problem, bardzo doceniany.

Answer 1

Można spróbować realizacji this Font Awesome ikonę wewnątrz pola - here's odpowiedniego pytania, które pomogą Ci osiągnąć pożądany rezultat.

.wrapper input[type="text"] { 
 
    position: relative; 
 
    } 
 
    
 
    input { font-family: 'FontAwesome'; } /* This is for the placeholder */ 
 
    
 
    .wrapper:before { 
 
     font-family: 'FontAwesome'; 
 
     color:red; 
 
     position: relative; 
 
     left: -5px; 
 
     content: "\f041"; 
 
    }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" integrity="sha256-uXf0U0UCIqBp2J3S53b28h+fpC9uFcA8f+b/NNmiwVk=" crossorigin="anonymous" /> 
 

 
<p class="wrapper"><input placeholder="&#61447; Username"></p>

Answer 2

Wypróbuj raz

.areabox{ 
 
width:auto; 
 
    border:1px solid #dddddd; 
 
} 
 
.areabox,.icon{ 
 
float:left; 
 
} 
 
.icon{ 
 
color:#dddddd; 
 
    font-size:18px; 
 
    padding:5px; 
 
} 
 
.areabox input{ 
 
    border:0px; 
 
    padding:5px; 
 
    font-size:12px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="areabox"><span class="glyphicon glyphicon-map-marker icon"></span> 
 
<input type="text" placeholder="Pickup Location"/> 
 
</div>

Answer 3

ja nie próbowałem, ale myślę, że to może działać.

<div class="form-group has-feedback has-feedback-left"> 
    <label class="control-label">Pickup Location</label> 
    <input type="text" class="form-control" placeholder="Pickup Location" /> 
    <i class="glyphicon glyphicon-map-marker form-control-feedback"></i> 
</div>