Bootstrap刷新圖標上提交按鈕的文本

Question

我想在我的頁面上有一個“刷新”按鈕。 為此，我決定使用bootstrap refresh-icon樣式。 圖標出現在我的按鈕上，但它沒有為“刷新”文本留下太多空間。 這是代碼和小提琴......

<input class="icon-refresh" type="submit" value="Refresh" name="Test"> </input>

http://jsfiddle.net/jjaleel/kVHbV/339/

任何人對如何擴展按鈕寬度有任何建議，以便顯示刷新圖標和文本？

謝謝。

Answer 1

你可以使用一個button標簽，它們的設計風格比輸入更多。

這是我如何使用最新的bootstrap ..

<button class="btn btn-primary"><span class="glyphicon glyphicon-refresh"></span> Refresh</button>

Answer 2

使用提交操作的<button>代替：

<button type="submit"><i class="icon-refresh"></i> Test</button>

的jsfiddle

Answer 3

將刷新圖標放在按鈕內的范圍內：

<button type="submit" value="Refresh" name="Test"><span class="icon-refresh"></span> </button>

更新 （基於OP評論）

根本無法改變標記，這很難。 要刪除“刷新”文本，請將文本顏色設置為transparent 。 對於大小調整，將顯示設置為內聯塊並將高度和寬度固定為20px。

input{
    display:inline-block;
    color:transparent;
    height:20px !important;
    width:20px !important;
}