在文本输入区域内添加位置标记字形图标答案

【问题标题】：Add a location marker glypphicon inside text input area在文本输入区域内添加位置标记字形图标
【发布时间】：2017-02-14 17:08:52
【问题描述】：

我正在使用引导程序并尝试在文本输入元素中添加位置字形标记

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

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

我在 W3Schools 上使用 botostrap glyphicons 跟踪了一个示例，该示例将 glyphicon 标记包含在 <span> 元素内，而不是在 ` 元素内，所以我相信 os 是我的问题所在。

IM 试图实现以下外观：

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

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

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

【问题讨论】：

相关：stackoverflow.com/questions/19350291/…
链接：stackoverflow.com/questions/18838964/…这个链接对你的问题有明确的答案。

标签： css html twitter-bootstrap glyphicons

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：