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

Question

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

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

<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

试一试

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

我没试过，但我认为这可能有用。

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

Answer 3

您可以尝试实施 this Font Awesome icon inside the field - 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>

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

Add a location marker glypphicon inside text input area

html

css

twitter-bootstrap

glyphicons