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

Question

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 Principalmente muestra hipervínculos de estilo.

Lo más cercano que he venido es que se muestre 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>

Answer 1

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>

Answer 2

Creo que puedes usar etiquetas de etiqueta para este propósito. Aquí hay una muestra de Twitter Bootstrap HTML Navbar:

<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 = envíe) y luego oculta la entrada real de entrada. Los usuarios pueden hacer clic en el elemento de la etiqueta y seguir adelante con el envío del formulario.

Answer 3

Creo que deberías probar esto Avanzado Diseñado para ser usado con Twitter Bootstrap.

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

Answer 4

Puede agregar un u003Ca/>icono con el icono en algún lugar y vincular una acción de 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íteme evitar la versión pura de JavaScript.u003C/a>

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 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 la jQuery mágica:

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

O si desea asegurarse de que el usuario siempre pueda enviar el formulario, que es lo que haría en sus zapatos, puede dejar el botón de envío normal en el formulario y ocultarlo con jQuery. Ate (). 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 icono si es posible.

Answer 5

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 el glificones de bootstrap Página en "Cómo usar":

Answer 6

<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á la salida HTML 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 7

There is one way, how to get (bootstrap's) glyphicons into input type="submit". Using css3 multiple background.

HTML:

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

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

If multiple backgrounds are overlaping, at the top will be first background at the background: notation. So at the top is background which is indented 16px from left side (16px is width of single glyphicon), at the bottom level is whole glyphicons-halflings.png and at the bottom level (covers whole element) is same background gradient as at the top level.

-48px 0px is the cut for search icon (icon-search) but it's easy to show any other icon.

If someone need a :hover effect, background must be again typed at the same form.

Answer 8

I got this to work, but there's a few caveats I haven't resolved yet.

Anyway, this is how it's done:

Take your average input button:

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

Cut out the icon you want for your submit buttons from the glyphicons sprite file, make sure it's a 14x14 px image. Yes, in ideal circumstances you could reuse the sprite, and if anyone figures that out I'll be happy to hear how it's done. :-)

Once you did that, you can write css for your input button like this:

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

Works in Firefox 14, Chrome 21

Doesn't work in IE 9

tl;dr: With a bit of css you can automagically put icons on your submit buttons, but you need to put the icon in a separate file and it won't work in Internet Explorer.

Answer 9

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 10

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

Answer 11

Usar la entrada de entrada con clases de complementos

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

Answer 12

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>