पाठ इनपुट क्षेत्र

Question

इम के अंदर एक स्थान मार्कर glypphicon जोड़े बूटस्ट्रैप का उपयोग कर और एक पाठ इनपुट तत्व

मैं इस तरह इनपुट क्षेत्र के लिए glypicon वर्ग को जोड़ने की कोशिश की अंदर एक स्थान Glyphicon मार्कर जोड़ने की कोशिश कर:

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

मैंने डॉट 3 स्कूल्स पर बोटोस्ट्रैप ग्लाइफिकॉन के साथ एक उदाहरण को अनुपालन किया जिसमें उदाहरण में <span> तत्व के अंदर ग्लाइफिकॉन मार्कर शामिल था, तत्व के अंदर नहीं, इसलिए मुझे विश्वास है कि मेरी समस्या कहां है।

आईएम निम्नलिखित देखो प्राप्त करने की कोशिश:

The example website where I got the image from उनके सीएसएस में एक पृष्ठभूमि छवि के रूप में स्थान मार्कर का उपयोग करता है ...

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

कैसे से निपटने के लिए के रूप में किसी भी सलाह इस समस्या, बहुत सराहना की।

Answer 1

आप क्षेत्र के अंदर this Font Awesome आइकन को लागू करने की कोशिश कर सकते - here's एक प्रासंगिक सवाल आप अपने वांछित परिणाम प्राप्त करने में मदद मिलेगी कि।

.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

यह एक बार

.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

प्रयास करें मैं इसे करने की कोशिश नहीं की है, लेकिन मुझे लगता है कि यह काम हो सकता है।

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