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;
}