Ajouter icône pour soumettre le bouton Twitter bootstrap 2

Question

Je veux utiliser les icônes « bootstrap » de twitter sur mes boutons de soumettre d’entrée du formulaire.

Les exemples sur http://twitter.github.com/bootstrap/base-css.html#icons montrent principalement style des liens hypertextes.

Le plus proche, je suis venu devient l’icône affichée en regard du bouton, mais pas à l’intérieur.

Answer 1

Vous pouvez utiliser une étiquette de bouton au lieu d’entrée

Answer 2

Je pense que vous pouvez utiliser les balises de l’étiquette à cet effet. Voici un échantillon de la barre de navigation twitter bootstrap HTML :

Fondamentalement, vous obtenez un élément label pour l’entrée (type = soumettre) et puis vous cachez le présenter d’entrée réels. Utilisateurs peuvent cliquer sur l’élément label et encore passer avec la soumission du formulaire.

Answer 3

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

Answer 4

Vous pouvez ajouter un <a/> avec l'icône de quelque part, et de la lier à un JavaScrit action pour elle, qui soumet le formulaire. Si nécessaire, le nom et la valeur de la original bouton envoyer nom+valeur peut être il y a caché dans un attribut. C'est facile avec jQuery, permettez-moi d'éviter la pure version JavaScript.

Supposons que c'est l'original du formulaire:

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

Modifier comme ceci:

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

...et puis la magie de jQuery:

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

Ou si vous voulez vous assurer que l'utilisateur peut toujours soumettre le formulaire -- ce que je ferais à votre place,--, vous pouvez laisser la normale bouton soumettre dans le formulaire, et de le cacher avec jQuery .hide(). Il assure que la connexion fonctionne toujours sans JavaScript et jQuery suivant la normale bouton envoyer (il y en a les gens en utilisant des liens, w3m et similaires navigateurs), mais fournit une fantaisie bouton avec l'icône si possible.

Answer 5

Je voulais le Twitter Bootstrap icônes à base de Rails de forme et suis tombé sur ce post. Après avoir cherché un peu, j'ai trouvé un moyen facile de le faire. Vous ne savez pas si vous êtes à l'aide de Rails, mais voici le code. L'essentiel était de passer d'un bloc à l'link_to helper de vue:

<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'êtes pas à l'aide de Rails, voici la sortie HTML pour les liens avec les icônes (pour l'éditer, supprimer, et de nouveaux boutons de soumission)

# Edit
<a href="http://stackoverflow.com/products/1/edit" class="btn btn-mini">Edit <i class="icon-pencil"></i></a>

# Delete
<a href="http://stackoverflow.com/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="http://stackoverflow.com/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