用户名和密码的引导图标答案

【问题标题】：bootstrap icon for username and password用户名和密码的引导图标
【发布时间】：2014-03-06 07:34:06
【问题描述】：

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

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

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

【问题讨论】：

请提供一个关于您的问题的 jsfiddle。我不明白它是关于什么的。
jsfiddle 是什么意思？我的问题是，图标显示不正确。代替用户图标，它显示 4 个图标，除了半身人图像中的用户图标。
请使用您的代码和示例图标设置您的问题：jsfiddle.net - 这将有助于我们了解您的问题。或者您可以将您的屏幕上传到第三方软件并在此处发布链接。
您的风格“left-inner-addon”似乎造成了问题。我已经删除了它，它工作得很好。我可以知道你为什么使用“left-inner-addon”类吗？
left-inner-addon 类是在文本框左侧显示图标。 .

标签： css twitter-bootstrap icons

【解决方案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>

希望对你有所帮助。

【讨论】：

不，它不起作用，我只是在起作用之前使用了但我希望它显示在文本框内。
尝试我在新答案中编写的新代码。希望这个会有所帮助。

【解决方案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;

}

【讨论】：

【解决方案3】：

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

【讨论】：