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

概述我使用bootstrap并尝试在文本输入元素中添加位置glyphicon标记 我尝试将glypicon类添加到输入区域,如下所示： <input type="text" class="form-control glyphicon glyphicon-map-marker" > 我在W3Schools上使用了botostrap glyphicons的示例,该示例包括< span>内的glyphico 我使用bootstrap并尝试在文本输入元素中添加位置glyphicon标记

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

<input type="text"  >

我在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 ><input placeholder="&#61447; Username"></p>

总结

以上是内存溢出为你收集整理的html – 在文本输入区域内添加位置标记glypphicon全部内容，希望文章能够帮你解决html – 在文本输入区域内添加位置标记glypphicon所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。