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