2013-02-24 69 views
2

我试图让一个按钮,连接到服务器的咕哝。目前我正在使用CSS的bootstrap。输入与引导图标

在我的快速模拟了,我做了前面我有这个按钮与耳机图标,但我想不出做它作为连接按钮,需要的标签,而不是标签。

这里是一个工作版本的按键我想它的风格和的咕哝的工作版本之一连接按钮的方式。

是否有可能使用与<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" /> 

回答

9

尝试这个 -

 <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-append取代.input-prepend

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