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

Question

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

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

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

我在W3Schools上使用了botostrap glyphicons的示例,该示例包括一个<span>元素内部的glyphicon标记,而不是在`元素内部,所以我相信我的问题所在的os.

IM尝试实现以下外观:

我从中获取图像的示例网站使用位置标记作为其css中的背景图像...

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

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

Answer 1

您可以尝试在字段中实现此Font Awesome图标 - 这是一个相关的问题,可以帮助您实现所需的结果.

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