[英]Bootstrap refresh icon with text on Submit button
I would like to have a "Refresh" button on my page. 我想在我的页面上有一个“刷新”按钮。 For that I decided to use the bootstrap refresh-icon style. 为此,我决定使用bootstrap refresh-icon样式。 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. 谢谢。
You could use a button
tag 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.. 这是我如何使用最新的bootstrap ..
<button class="btn btn-primary"><span class="glyphicon glyphicon-refresh"></span> Refresh</button>
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
. 要删除“刷新”文本,请将文本颜色设置为transparent
。 For sizing, set display to inline-block and fix height and width to 20px. 对于大小调整,将显示设置为内联块并将高度和宽度固定为20px。
input{
display:inline-block;
color:transparent;
height:20px !important;
width:20px !important;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.