Thêm một glypphicon vị trí đánh dấu bên trong vùng nhập văn bản

Question

Im sử dụng bootstrap và cố gắng để thêm một dấu vị trí glyphicon bên trong một yếu tố đầu vào văn bản

Tôi đã thử thêm lớp glypicon vào vùng đầu vào như thế này:

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

Tôi đã theo dõi một ví dụ về W3Schools với glyphicons botostrap ví dụ bao gồm điểm đánh dấu glyphicon bên trong một phần tử <span> KHÔNG bên trong một phần tử `, vì vậy tôi tin rằng os là vấn đề của tôi.

IM cố gắng để đạt được nhìn sau:

The example website where I got the image from sử dụng các điểm đánh dấu vị trí làm hình nền trong css của họ ...

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

Bất cứ lời khuyên như thế nào để giải quyết vấn đề vấn đề này, được nhiều người đánh giá cao.

Answer 1

Bạn có thể thử thực hiện this Font Awesome biểu tượng bên trong lĩnh vực này - here's một câu hỏi có liên quan sẽ giúp bạn đạt được kết quả mong muốn của bạn.

.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

Try It Khi

.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

Tôi đã không thử nó nhưng tôi nghĩ rằng điều này có thể làm việc.

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