Ajouter une icône au bouton Soumettre sur twitter bootstrap 2

je pense que vous pouvez utiliser des étiquettes à cet effet. Voici un échantillon du bootstrap de twitter 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>

fondamentalement, vous obtenez un élément d'étiquette pour l'entrée (type=soumettre) et ensuite vous masquez l'entrée réelle soumettre. Les utilisateurs peuvent cliquer sur l'élément étiquette et obtenir tout de même avec la soumission de formulaire.

je pense que vous devriez essayer ce FontAwesome conçu pour être utilisé avec Bootstrap Twitter.

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

vous pouvez ajouter un avec l'icône quelque part, et lier une action JavaScrit pour elle, qui soumet le formulaire. Si nécessaire, le nom et la valeur du le nom+la valeur du bouton original submit peut être présent dans un attribut caché. C'est facile avec jQuery, permettez-moi d'éviter la version JavaScript pure.

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

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

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

je voulais aux icônes Twitter Bootstrap à un formulaire de Rails de base et suis tombé sur ce post. Après quelques recherches, j'ai trouvé un moyen facile de le faire. Je ne sais pas si vous utilisez des Rails, mais voici le code. La clé était de passer un bloc à l'aide de link_to view:

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

dans le cas où vous n'utilisez pas les Rails, voici la sortie HTML pour les liens avec des icônes (pour un edit, supprimer, et de nouveaux boutons soumettre)

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

et voici un lien vers la capture d'écran du résultat final: http://grab.by/cVXm

il y a une nouvelle façon de le faire avec bootstrap 3:

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

C'est sur le bootstrap glyphicons page sous "comment utiliser":

Il ya une façon, comment obtenir (bootstrap) glyphicons dans input type="submit" . Utilisant CSS3 fond multiple.

HTML:

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

et 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 plusieurs fonds se chevauchent, le premier fond se trouve au sommet de la notation background: . Ainsi, en haut se trouve le fond qui est indenté 16px du côté gauche ( 16px est la largeur du glyphicon simple), en bas le niveau est entier glyphicons-halflings.png et au niveau inférieur (couvre l'élément entier) est le même gradient de fond qu'au niveau supérieur.

-48px 0px est l'icône de recherche ( icon-search ) mais il est facile de montrer une autre icône.

si quelqu'un a besoin d'un effet :hover , background doit être tapé à nouveau sur le même formulaire.

j'ai obtenu ceci pour travailler, mais il y a quelques caveats que je n'ai pas encore résolu.

de toute façon, c'est comme ça qu'on fait:

prenez votre bouton d'entrée moyen:

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

découpez l'icône que vous voulez pour vos boutons soumettre à partir du fichier Glyphicons sprite, assurez-vous que c'est une image 14x14 px. Oui, dans des circonstances idéales, vous pouvez réutiliser le sprite, et si quelqu'un le découvre, je serai heureux d'entendre comment c'est fait. :- )

une fois que vous avez fait cela, vous pouvez écrire css pour votre bouton d'entrée comme ceci:

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

Ne fonctionne pas dans IE 9

tl;dr: avec un peu de css vous pouvez automatiquement mettre des icônes sur vos boutons soumettre, mais vous devez mettre l'icône dans un fichier séparé et il ne fonctionnera pas dans Internet Explorer.

je pense que la solution à votre problème

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

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

utiliser input-append avec add-on classes

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

je suppose que cette meilleure façon, fonctionne très bien pour moi.

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