2013-02-24 80 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/