は、ブートストラップを使用して、テキスト入力要素</p> <p>内部の位置glyphiconマーカーを追加しようとするテキスト入力領域

Question

イム内部の位置マーカーのglypphiconを追加し、私は次のように入力エリアにglypiconクラスを追加してみました：

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

私はボトストラップグリフィンでW3Schoolの例を示しましたが、この例では、要素内にない<span>要素の中にグリフィコンマーカーが含まれていましたので、私の問題がどこにあるか信じています。次の外観を達成しようとして

IM：

The example website where I got the image fromが取り組む方へと

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

...自分のCSSの背景画像として何かアドバイスを位置マーカーを使用していますこの問題は、大いに感謝しています。

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>