我使用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);
关于如何解决这个问题的任何建议,非常感谢.
解决方法
您可以尝试在字段内实施
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=" Username"></p>