Html 提交按钮上带有文本的 Bootstrap 刷新图标

Bootstrap refresh icon with text on Submit button

提问by AbuMariam

I would like to have a "Refresh" button on my page. For that I decided to use the bootstrap refresh-icon style. The icon appears on my button but it does not leave much room for the text "Refresh". Here is the code and Fiddle...

我想在我的页面上有一个“刷新”按钮。为此，我决定使用引导程序刷新图标样式。图标出现在我的按钮上，但它没有为文本“刷新”留下太多空间。这是代码和小提琴......

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

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

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

Anyone have any suggestions on how I can expand the button width so it shows both the refresh icon and the text?

任何人都对如何扩展按钮宽度以便同时显示刷新图标和文本有任何建议？

Thanks.

谢谢。

回答by Dale

You could use a buttontag instead, they were made to be styled with much more control than an input.

您可以改用button标签，它们的样式比输入具有更多的控制。

Here's how I would use one with the latest bootstrap..

这是我将如何使用最新的引导程序..

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

回答by Maxime Lorant

Use a <button>, with the submit action, instead:

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

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

JSFiddle

JSFiddle

回答by Faust

Put the refresh icon in a span inside a button:

将刷新图标放在按钮内的跨度中：

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

update(based on OP comment)

更新（基于 OP 评论）

Without being able to change the markup at all, this is tough. To get rid of the "Refresh" text, set the text-color to transparent. For sizing, set display to inline-block and fix height and width to 20px.

根本无法更改标记，这很困难。要摆脱“刷新”文本，请将文本颜色设置为transparent. 对于调整大小，将 display 设置为 inline-block 并将高度和宽度固定为 20px。

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