我想在我的表单输入提交按钮上使用twitter引导图标。
http://twitter.github.com/bootstrap/base-css.html#icons上的例子主要是有样式的超链接。
我最接近的方法是让图标显示在按钮旁边，但不是在按钮里面。
<div class="input-prepend">
<span class="add-on"><i class="icon-user icon-white"></i></span>
<input type="submit" class="btn-primary" value="Login" >
</div>
当前回答
有一种方法，如何获得(bootstrap的)字形输入类型="提交"。使用css3多后台。
HTML:
<form class="form-search">
…
<input type="submit" value="Search">
</form>
和CSS:
.form-search input[type="submit"] {
padding-left:16px; /* space for only one glyphicon */
background:-moz-linear-gradient(top,#fff 0%,#eee 100%) no-repeat 16px top,
url(../images/glyphicons-halflings.png) no-repeat -48px 0,
-moz-linear-gradient(top,#fff 0%,#eee 100%); /* FF hack */
/* another hacks here */
background:linear-gradient(to bottom,#fff 0%,#eee 100%) no-repeat 16px top,
url(../images/glyphicons-halflings.png) no-repeat -48px 0,
linear-gradient(to bottom,#fff 0%,#eee 100%); /* Standard way */
}
如果多个背景是重叠的，在顶部将有第一个背景在后台:符号。 所以在顶部是背景，从左边缩进16px (16px是单个象形文字的宽度)，在底层是整个象形文字- hallings .png，在底层(覆盖整个元素)是相同的背景梯度在顶层。
0px是搜索图标(icon-search)的切割，但很容易显示任何其他图标。
如果有人需要一个:悬停效果，背景必须再次键入相同的形式。
其他回答
我想这种更好的方法对我来说很好。
<form name="myform">
<!-- form fields -->
<a href="#" class="btn btn-success" onclick="document.myform.submit();">
Submit <i class="icon-plus"></i> Icon
</a>
</form>
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <button type="button" class="btn btn-info"> <span class="glyphicon glyphicon-search"></span> Search </button> </p> <a href="#" class="btn btn-success btn-lg"> <span class="glyphicon glyphicon-print"></span> Print </a> </p> </div> </body> </html>
您可以使用按钮标记代替输入
<button type="submit" class="btn btn-primary">
<i class="icon-user icon-white"></i> Sign in
</button>
我认为你应该尝试这个FontAwesome设计用于Twitter Bootstrap。
<button class="btn btn-primary icon-save">Button With Icon</button>
我让它工作，但有几个警告我还没有解决。
不管怎样，是这样的:
以你的平均输入按钮为例:
<input type="submit" class="btn btn-success" value="Save">
从glyphicons精灵文件中剪出你想要的提交按钮图标，确保它是14x14像素的图像。是的，在理想的情况下，你可以重复使用精灵，如果有人能解决这个问题，我很乐意听听怎么做。: -)
一旦你这样做了，你可以像这样为你的输入按钮写css:
input[type='submit'] {
background-image: url('../images/submit-icon.png'), #62C462; /* fallback color if gradients are not supported */
background-image: url('../images/submit-icon.png'), -webkit-linear-gradient(top, #62C462, #51A351);
background-image: url('../images/submit-icon.png'), -moz-linear-gradient(top, #62C462, #51A351); /* For Fx 3.6 to Fx 15 */
background-image: url('../images/submit-icon.png'), -ms-linear-gradient(top, #62C462, #51A351); /* For IE 10 Platform Previews and Consumer Preview */
background-image: url('../images/submit-icon.png'), -o-linear-gradient(top, #62C462, #51A351); /* For Opera 11.1 to 12.0 */
background-image: url('../images/submit-icon.png'), linear-gradient(top, #62C462, #51A351); /* Standard syntax; must be the last statement */
background-repeat: no-repeat;
background-position: 5px 50%, 0cm 0cm;
padding-left: 25px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
input[type='submit']:hover {
background-image: url('../images/submit-icon.png'), #51A351; /* fallback color if gradients are not supported */
background-image: url('../images/submit-icon.png'), -webkit-linear-gradient(top, #51A351, #51A351);
background-image: url('../images/submit-icon.png'), -moz-linear-gradient(top, #51A351, #51A351); /* For Fx 3.6 to Fx 15 */
background-image: url('../images/submit-icon.png'), -ms-linear-gradient(top, #51A351, #51A351); /* For IE 10 Platform Previews and Consumer Preview */
background-image: url('../images/submit-icon.png'), -o-linear-gradient(top, #51A351, #51A351); /* For Opera 11.1 to 12.0 */
background-image: url('../images/submit-icon.png'), linear-gradient(top, #51A351, #51A351); /* Standard syntax; must be the last statement */
background-position: 5px 50%, 0cm 0cm;
padding-left: 25px;
}
适用于Firefox 14, Chrome 21
在IE 9中不能工作
tl;dr:通过一点css，你可以自动地把图标放在提交按钮上，但是你需要把图标放在一个单独的文件中，而且在Internet Explorer中行不通。
