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

227

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>
AyKarsi
fuente
2
Traté de hacer esto por un tiempo sin éxito. Básicamente, no puede agregar elementos html dentro del valor de un botón.
John Goodman
@JohnGoodman Eso debería ser una respuesta, no un comentario. La respuesta aceptada es una solución alternativa y no una respuesta directa a la pregunta.
cartbeforehorse

Respuestas:

394

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>
Simon Cunningham
fuente
12
Esto funciona, sin embargo, consulte w3schools.com/tags/tag_button.asp para obtener más información sobre para qué sirve la etiqueta del botón y su efecto de navegador cruzado. Use esto con precaución, especialmente con los formularios.
Matenia Rossides
10
He probado esto en Chrome, Firefox, Safari (en win7) e IE8 dentro de una etiqueta <form> como botón de envío con éxito
Mr Bell
44
El único problema que he tenido con este enfoque es que si hay otros botones en el formulario, entonces su formulario no se enviará al presionar la tecla Intro en el teclado, ya que uno de los otros botones tendrá prioridad. ¿Alguna solución conocida?
Jeshurun ​​el
2
Esto era exactamente lo que estaba haciendo. Sin embargo, el icono no apareció después de que agregué la <i>etiqueta. Fue extremadamente enloquecedor, hasta que descubrí que necesitaba limpiar el caché. Si se encuentran con el mismo problema, amigos, presionen Ctrl+F5para borrar el caché y actualizar, ¡y vean el glorioso ícono!
Aditya MP
2
Necesitaba agregaronClick="submit();"
TimP
67

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.

Christian Michael
fuente
99
Esto para mí es lo mejor de ambos mundos. Obtiene el estilo que desea y no está utilizando un enlace o javascript.
AaronLS
1
Si bien esto aplica el estilo y se ve muy bien, evita que el formulario se envíe cuando el usuario presionó enter en un campo de entrada. (Probado solo en FF17)
Richard
1
Claramente la mejor solución para mí. ¡Salud!
Armel Larcier
14

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>
pengemizt
fuente
11

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.

Sandor Bedo
fuente
Le pido que responda esta pregunta mía si tiene alguna idea al respecto. stackoverflow.com/questions/11295378/…
Krishnaprasad Varma
8

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

Justin
fuente
7

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

Brett Sanders
fuente
2
Entonces, ¿qué sucede cuando un motor de búsqueda rastrea su sitio, ve un enlace llamado 'Eliminar', decide: "Oh, creo que seguiré ese enlace" y comienza a jugar con su base de datos? Siempre me dijeron que los cambios siempre deben realizarse con operaciones que no sean GET por ese motivo.
Asfand Qazi
Probablemente esté usando autorización para eliminar enlaces, la mayoría de la gente lo hace.
Noz
2
Fuera de tema, ya que el OP no preguntaba por los rieles, pero ... Rails de hecho usa un método de eliminación cuando integra este tipo de hipervínculo a través de un JavaScript discreto. Si alguien solicitara ese enlace directamente, lo predeterminado sería presentar ese registro, no eliminarlo. Vea esta respuesta para obtener más detalles: stackoverflow.com/a/2809412/252290
levous
Esto se trata específicamente de un botón de envío, no de una etiqueta de anclaje.
pixelearth
6

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.

iiic
fuente
Si bien esto podría funcionar, ciertamente no es tan elegante como usar <button type = "submit"> y será más difícil de mantener.
Richard
4

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.

Moeri
fuente
1

Creo que es una solución para tu problema.

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

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

Ganesh Putta
fuente
1
La pregunta era sobre enviar
Grigory Kislin
Esto es bootstrap 3: la pregunta se refería al formato bootstrap 2, que utiliza otro formato para mostrar los iconos.
Calaelen
-1

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