我想在我的表单输入提交按钮上使用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>

当前回答

我认为你应该尝试这个FontAwesome设计用于Twitter Bootstrap。

<button class="btn btn-primary icon-save">Button With Icon</button>

其他回答

有一种方法,如何获得(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)的切割,但很容易显示任何其他图标。

如果有人需要一个:悬停效果,背景必须再次键入相同的形式。

我认为你可以使用标签来达到这个目的。下面是一个推特引导HTML导航栏的示例:

<form class="navbar-search">
    <input type="text" class="search-query" placeholder="Search here" />        
    <label for="mySubmit" class="btn"><i class="icon-search icon-white"></i> Search me</label>
    <input id="mySubmit" type="submit" value="Go" class="hidden" />
</form>

基本上你得到一个标签元素的输入(type=submit),然后你隐藏实际的输入提交。用户可以单击label元素,但仍然可以完成表单提交。

我想这种更好的方法对我来说很好。

<form name="myform">
<!-- form fields -->
   <a href="#" class="btn btn-success" onclick="document.myform.submit();">
     Submit <i class="icon-plus"></i>&nbsp; Icon
   </a>
</form>

我认为这是解决你问题的办法

<input type="text" placeholder="search here" />
<button type="submit"><i class="glyphicon glyphicon-search"></button>

我认为你应该尝试这个FontAwesome设计用于Twitter Bootstrap。

<button class="btn btn-primary icon-save">Button With Icon</button>