用户名和密码的引导图标

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>

而且我没有发布登录表单图片的声誉。

原文由 Raghavendra 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 Boostrap 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

原文由 card_master 发布，翻译遵循 CC BY-SA 3.0 许可协议