Agregar icono para enviar el botón en Twitter Bootstrap 2

Quiero usar los iconos de arranque de Twitter en mis botones de envío de entrada de formulario.

Los ejemplos en http://twitter.github.com/bootstrap/base-css.html#icons muestran principalmente hipervínculos con estilo.

Lo más cerca que he estado es de mostrar el icono al lado del botón, pero no dentro.

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

Puede usar una etiqueta de botón en lugar de entrada

<button type="submit" class="btn btn-primary">
  <i class="icon-user icon-white"></i> Sign in
</button>

Creo que puedes usar etiquetas para este propósito. Aquí hay una muestra de la barra de navegación HTML de bootstrap de Twitter:

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

Básicamente obtienes un elemento de etiqueta para la entrada (type = submit) y luego ocultas el envío de entrada real. Los usuarios pueden hacer clic en el elemento de la etiqueta y seguir adelante con el envío del formulario.

Creo que deberías probar este FontAwesome diseñado para usarse con Twitter Bootstrap.

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

Puede agregar un <a/> con el icono en alguna parte y vincularle una acción JavaScrit que envíe el formulario. Si es necesario, el nombre y el valor del nombre + valor del botón de envío original pueden estar allí en un atributo oculto. Es fácil con jQuery, permítame evitar la versión pura de JavaScript.

Supongamos que esta es la forma original:

<form method="post" id="myFavoriteForm>
   ...other fields...
   <input class="btn btn-primary" type="submit" name="login" value="Let me in" />
</form>

Cámbialo así:

<form method="post" id="myFavoriteForm">
   ...other fields...
   <a href="#" class="btn btn-primary" id="myFavoriteFormSubmitButton">
      <i class="icon-user icon-white"></i>&nbsp;Let me in
   </a>
</form>

... y luego el mágico jQuery:

$("#myFavoriteFormSubmitButton").bind('click', function(event) {
   $("#myFavoriteForm").submit();
});

O si desea asegurarse de que el usuario siempre puede enviar el formulario, eso es lo que haría en su lugar, puede dejar el botón de envío normal en el formulario y ocultarlo con jQuery .hide (). Asegura que el inicio de sesión todavía funcione sin JavaScript y jQuery de acuerdo con el botón de envío normal (hay personas que usan enlaces, w3m y navegadores similares), pero proporciona un botón elegante con un icono si es posible.

Hay una nueva forma de hacer esto con Bootstrap 3:

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span> Star
</button>

Está en la página de glifos de bootstrap en "cómo usar":

Quería que los íconos de Bootstrap de Twitter fueran un formulario básico de Rails y encontré esta publicación. Después de buscar un poco, descubrí una manera fácil de hacerlo. No estoy seguro si está utilizando Rails, pero aquí está el código. La clave era pasar un bloque al link_to view helper:

<tbody>
    <% @products.each do |product| %>
      <tr>
        <td><%= product.id %></td>
        <td><%= link_to product.name, product_path(product) %></td>
        <td><%= product.created_at %></td>
        <td>
          <%= link_to(edit_product_path(product), :class => 'btn btn-mini') do %>
          Edit <i class="icon-pencil"></i>
          <% end %>

          <%= link_to(product_path(product), :method => :delete, :confirm => 'Are you sure?', :class => 'btn btn-mini btn-danger') do %>
          Delete <i class="icon-trash icon-white"></i>
          <% end %>
        </td>
      </tr>
    <% end %>
  </tbody>
</table>

<%= link_to(new_product_path, :class => 'btn btn-primary') do %>
    New <i class="icon-plus icon-white"></i>
<% end %>

En caso de que no esté utilizando Rails, aquí está el HTML de salida para los enlaces con iconos (para editar, eliminar y nuevos botones de envío)

# Edit
<a href="/products/1/edit" class="btn btn-mini">Edit <i class="icon-pencil"></i></a>

# Delete
<a href="/products/1" class="btn btn-mini btn-danger" data-confirm="Are you sure?" data-method="delete" rel="nofollow"> Delete <i class="icon-trash icon-white"></i></a>

# New
<a href="/products/new" class="btn btn-primary">New <i class="icon-plus icon-white"></i></a>

Y aquí hay un enlace a la captura de pantalla del resultado final: http://grab.by/cVXm

Hay una manera, cómo obtener glificones (de bootstrap) input type="submit". Usando css3 fondo múltiple.

HTML:

<form class="form-search">
   …
   <input type="submit" value="Search">
</form>

y 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 */
}

Si se superponen varios fondos, en la parte superior aparecerá el primer fondo en la background:notación. Entonces, en la parte superior está el fondo que está sangrado 16pxdesde el lado izquierdo ( 16pxes el ancho del glificón simple), en el nivel inferior está completo glyphicons-halflings.pngy en el nivel inferior (cubre todo el elemento) está el mismo gradiente de fondo que en el nivel superior.

-48px 0pxes el ícono de corte para búsqueda ( icon-search) pero es fácil mostrar cualquier otro ícono.

Si alguien necesita un :hoverefecto, el fondo debe escribirse nuevamente en la misma forma.

Tengo esto para trabajar, pero hay algunas advertencias que aún no he resuelto.

De todos modos, así es como se hace:

Tome su botón de entrada promedio:

<input type="submit" class="btn btn-success" value="Save">

Recorte el icono que desea para sus botones de envío del archivo sprite de glifos, asegúrese de que sea una imagen de 14x14 px. Sí, en circunstancias ideales, podría reutilizar el sprite, y si alguien se da cuenta, me alegrará saber cómo se hace. :-)

Una vez que haya hecho eso, puede escribir css para su botón de entrada de esta manera:

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

Funciona en Firefox 14, Chrome 21

No funciona en IE 9

tl; dr: con un poco de CSS puede colocar automáticamente iconos en los botones de envío, pero debe colocar el icono en un archivo separado y no funcionará en Internet Explorer.

Creo que es una solución para tu problema.

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

Use input-append con clases adicionales

<div class="input-append">
  <input class="span2" id="appendedPrependedInput" type="text">
  <span class="add-on">.00</span>
</div>

Supongo que esta mejor manera, funciona bien para mí.

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