twitter-bootstrap 用户名和密码的引导程序图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22217992/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap icon for username and password
提问by Raghavendra
I am designing login page. Here I am adding icons for username and password, when I add icons along with icons someother icons also adding how to resolve this . Here is my code.
我正在设计登录页面。在这里，我为用户名和密码添加图标，当我添加图标和图标时，其他一些图标也添加了如何解决这个问题。这是我的代码。
<div class="left-inner-addon ">
<i class="icon-user"></i>
<input type="text" placeholder="User Name" name='j_username' >
</div></div>
and css is as follow,
和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>
and I dont have reputation to post pic of the login form .
而且我没有发布登录表单图片的声誉。
回答by Jiteen
I got an idea of what you are facing, according to the current standards of Twitter Bootstrap, you just have to use the following code to achieve what you want. I had tested it on live server and it is working fine. Just replace your HTML Code by the following code :
我知道你所面临的问题，根据 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>
I hope this help.
我希望这有帮助。
回答by Jiteen
I am writing a new answer for what you asked. Follow this code. This will definitely help.
我正在为您提出的问题写一个新答案。遵循此代码。这肯定会有所帮助。
Here's the HTML for the text box:
这是文本框的 HTML：
<div class="input-group">
<input type="text" placeholder="User Name" name='j_username' id="funkystyling" />
</div>
Here's the CSS for the image on the left:
这是左侧图像的 CSS：
#funkystyling {
background: white url(/path to icon.png) left no-repeat;
padding-left: 17px;
}
And here's the CSS for the image on the right:
这是右侧图像的 CSS：
#funkystyling {
background: white url(/path to icon.png) right no-repeat;
padding-right: 17px;
}
回答by card_master
With Boostrap 2.3.2
使用 Boostrap 2.3.2
HTML
HTML
<div class="left-inner-addon ">
<i class="icon-user"></i>
<input type="text" class="form-control" placeholder="User Name" name='j_username' >
</div>
<div class="left-inner-addon ">
<i class="icon-user"></i>
<input type="text" class="form-control" placeholder="User Name" name='j_username' >
</div>
CSS
CSS
.left-inner-addon {
position: relative;
}
.left-inner-addon input {
padding-left:20px;
height:20px;
}
.left-inner-addon i {
position: absolute;
margin:7px 5px;
}
