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

我使用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="&#61447; Username"></p>

原文地址：https://www.jb51.cc/html/226902.html