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

我想在我的頁面上有一個「刷新」按鈕。爲此，我決定使用引導刷新圖標樣式。該圖標顯示在我的按鈕上，但不會爲「刷新」文本留下太多空間。下面是代碼和小提琴...提交按鈕上的文本的引導刷新圖標

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

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

任何人有這樣它同時顯示刷新圖標和文本我如何擴展按鈕寬度有什麼建議？

謝謝。

來源

2014-02-08 AbuMariam

使用['button']（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button）標籤，而是它們的製作:) – Dale

我們不能指定寬度嗎？ –

您可以改爲使用button標籤，使它們具有比輸入更多的控件樣式。

這是我會怎麼用一個與最新的引導..

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

來源

2014-02-08 15:23:53 Dale

爲什麼有人降低了這一點，並upvote我？它與我的（實際上）是一樣的，並更合適地使用框架。 – Faust

@Faust它是其中一個幻影downvotes :)我不介意，但只要OP得到答案嘿:) – Dale

感謝您的答覆。但在我的情況下，我正在使用Richfaces命令按鈕（http://docs.jboss.org/richfaces/latest_3_3_X/en/devguide/html/a4j_commandButton.html），所以標籤實際上是生成的。我不相信我能改變它。無論如何，我可以使用輸入標籤在原始問題中進行操作嗎？ – AbuMariam

把刷新圖標跨度按鈕內：

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

更新（基於OP評論）

根本不能改變標記，這很難。要擺脫「刷新」文本，請將文本顏色設置爲transparent。爲了確定尺寸，將顯示設置爲內嵌塊並將高度和寬度固定爲20像素。

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

來源

2014-02-08 15:24:38 Faust

感謝您的回覆，但請參閱我對戴爾的評論。 – AbuMariam

使用<button>，與提交操作，而不是：

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

JSFiddle

來源

2014-02-08 15:27:21

感謝您的回覆，但請參閱我對戴爾的評論。 – AbuMariam

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

回答

相關問題