twitter-bootstrap - type - input search bootstrap

Añadir icono para enviar botón en twitter bootstrap 2

Question

Quiero usar los iconos de inicio de Twitter en los botones de envío de entrada del 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 llegado es obtener el ícono 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>

Answer 1

Conseguí 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 ícono que desea para sus botones de envío del archivo sprite de glyphicons, 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 de eso, estaré encantado de escuchar cómo se hace. :-)

Una vez que hiciste eso, puedes escribir css para tu botón de entrada así:

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 los íconos en los botones de envío, pero debe colocar el ícono en un archivo separado y no funcionará en Internet Explorer.

Answer 2

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

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

Answer 3

Creo que es una solución para tu problema.

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

Answer 4

Creo que puedes usar etiquetas para este propósito. Aquí hay una muestra de la barra de navegación de HTML bootstrap 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>

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

Answer 5

Hay una forma, cómo obtener los glifos (bootstrap) en input type="submit" . Usando el fondo múltiple css3.

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 hay varios fondos superpuestos, en la parte superior aparecerá el primer fondo en el background: notación. Así que en la parte superior está el fondo que tiene una sangría de 16px desde el lado izquierdo ( 16px es el ancho de un solo glifón), en el nivel inferior está la parte completa de los glyphicons-halflings.png y en el nivel inferior (cubre todo el elemento) el mismo gradiente de fondo que en el nivel superior.

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

Si alguien necesita un :hover efecto de :hover , el fondo debe escribirse nuevamente en el mismo formulario.

Answer 6

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 arranque en "cómo usar":

Answer 7

Puede agregar un <a/> con el icono en alguna parte y vincularlo con una acción JavaScrit, que envía 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 de JavaScript pura.

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>

Cambiarlo de esta manera:

<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 pueda enviar el formulario (eso es lo que haría en sus zapatos), 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.

Answer 8

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

Answer 9

Quería los íconos de Bootstrap de Twitter en un formulario de Rails básico y encontré esta publicación. Después de buscar un poco, descubrí una manera fácil de hacerlo. No estoy seguro si está usando Rails, pero aquí está el código. La clave fue 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é usando Rails, aquí está el código 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

Answer 10

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>

Answer 11

Use la entrada de datos agregados con clases adicionales

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

Answer 12

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