在文本输入区域内添加位置标记glypphicon

Question

我使用bootstrap并尝试在文本输入元素中添加位置glyphicon标记

我尝试将glypicon类添加到输入区域，如下所示：

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

我在W3Schools上有一个带有botostrap glyphicons的例子，例子包括<span>元素内的glyphicon标记，而不是在`元素内部，所以我相信我的问题所在的os。

IM试图实现以下目标：

The example website where I got the image from在其css中使用位置标记作为背景图片...

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

关于如何解决这个问题的任何建议，非常感谢。

Answer 1

您可以尝试在字段中实施this Font Awesome图标 - here's一个相关问题，可帮助您实现所需结果。

＆＃13;

＆＃13;

.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";
    }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>