带有引导图标的输入

【问题标题】：Input's with bootstrap icons带有引导图标的输入
【发布时间】：2013-02-09 21:20:06
【问题描述】：

我正在尝试制作一个连接到 Mumble 服务器的按钮。我目前正在为 CSS 使用引导程序。

在我之前做的快速模型中，我有这个带有耳机图标的按钮，但是我不知道怎么做，因为连接按钮需要标签而不是标签。

这里是按钮的工作版本，我希望它的样式和 Mumble 连接按钮的工作版本之一。

是否可以将图标与<input> 一起使用？

样式按钮；

<button class="btn btn-large btn-primary" type="button"><i class="icon-headphones icon-white"></i> Connect to Mumble</button>

连接'按钮';

<input class="button" value="Connect" onclick="window.location.href='mumble://MUMBLE IP HERE/?version=1.2.3'" type="BUTTON" />

【问题讨论】：

标签： html twitter-bootstrap styles icons

【解决方案1】：

试试这个-

       <div class="input-prepend">
        <span class="add-on"><i class="icon-user icon-black"></i></span>
<input type="text" name="login" class="//Some class" placeholder="Email address"/>
         </div>

如果要添加它，只需将.input-prepend 替换为.input-append。

示例-http://jsfiddle.net/PYwq5/

更新引导程序 V3-

追加-

<div class="input-group">
    <input type="email" class="form-control" />
    <span class="input-group-addon">
        icon</span>
</div>

前置-

<div class="input-group">
    <span class="input-group-addon">
        icon</span>
    <input type="email" class="form-control" />
</div>

演示-https://jsfiddle.net/DTcHh/9190/

【讨论】：