用户名和密码的bootstrap图标

Question

我正在设计登录页面。在这里，我添加了用户名和密码的图标，当我添加图标和图标时，还有其他图标，还添加了如何解决此问题。这是我的代码。

<div class="left-inner-addon ">
            <i class="icon-user"></i>
            <input type="text" placeholder="User Name" name='j_username' >
</div></div> 

和css如下，

<style type="text/css">
.left-inner-addon {
    position: relative;
}
.left-inner-addon input {
    padding-left: 30px;    
}
.left-inner-addon i {
    position: absolute;
    padding: 10px 12px;
    pointer-events: none;
}
</style>

我没有声明发布登录表单的图片。

Answer 1

我知道你面临的是什么，根据Twitter Bootstrap的当前标准，你只需要使用以下代码来实现你想要的。我在实时服务器上测试了它，它工作正常。只需用以下代码替换您的HTML代码：

<div class="input-group">
  <span class="input-group-addon glyphicon glyphicon-user"></span>
  <input type="text" class="form-control" placeholder="User Name" name='j_username'>
</div>

我希望这有帮助。

Answer 2

我正在为你提出的问题写一个新答案。请遵循此代码。这肯定会有所帮助。

这是文本框的HTML：

<div class="input-group">    
<input type="text" placeholder="User Name" name='j_username'  id="funkystyling" />
</div>

这是左边图像的CSS：

#funkystyling {

    background: white url(/path to icon.png) left no-repeat;

    padding-left: 17px;

}

这是右边图像的CSS：

#funkystyling {

    background: white url(/path to icon.png) right no-repeat;

    padding-right: 17px;

}

Answer 3

使用Bootstrap 2.3.2

HTML

<div class="left-inner-addon ">
    <i class="icon-user"></i>
    <input type="text" class="form-control" placeholder="User Name" name='j_username' >
</div>

CSS

.left-inner-addon {
    position: relative;
}
.left-inner-addon input { 
    padding-left:20px;
    height:20px;
}
.left-inner-addon i {
    position: absolute;
    margin:7px 5px;
}

JSFFIDLE