Ajouter une icône pour soumettre le bouton dans twitter bootstrap 2

227

Je souhaite utiliser les icônes twitter bootstrap sur les boutons de soumission de mon formulaire.

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

Le plus proche que je suis venu est d'afficher l'icône à côté du bouton, mais pas à l'intérieur.

<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
la source
2
J'ai essayé de le faire pendant un certain temps sans succès. Fondamentalement, vous ne pouvez pas ajouter d'éléments HTML dans la valeur d'un bouton.
John Goodman
@JohnGoodman Ce devrait être une réponse, pas un commentaire. La réponse acceptée est une solution de contournement et non une réponse directe à la question.
cartbeforehorse

Réponses:

394

Vous pouvez utiliser une étiquette de bouton au lieu de la saisie

<button type="submit" class="btn btn-primary">
  <i class="icon-user icon-white"></i> Sign in
</button>
Simon Cunningham
la source
12
Cela fonctionne, cependant, veuillez consulter w3schools.com/tags/tag_button.asp pour plus d'informations sur la signification de la balise button et son effet de navigateur croisé. Utilisez-le avec prudence, en particulier avec les formulaires.
Matenia Rossides
10
J'ai testé cela dans Chrome, Firefox, Safari (sur win7) et IE8 à l'intérieur d'une balise <form> en tant que bouton d'envoi avec succès
M. Bell
4
Le seul problème que j'ai rencontré avec cette approche est que s'il existe d'autres boutons dans le formulaire, votre formulaire ne sera pas soumis lorsque vous appuyez sur la touche Entrée du clavier, car l'un des autres boutons aura la priorité. Des solutions de contournement connues?
Jeshurun ​​du
2
C'était exactement ce que je faisais. Cependant, l'icône n'est pas apparue après avoir ajouté la <i>balise. C'était extrêmement exaspérant, jusqu'à ce que je découvre que je devais vider le cache. Si vous rencontrez le même problème, les gens, appuyez sur Ctrl+F5pour vider le cache et actualiser, et voyez l'icône glorieuse!
Aditya MP
2
Je devais ajouteronClick="submit();"
TimP
67

Je pense que vous pouvez utiliser des étiquettes d'étiquettes à cet effet. Voici un exemple de la barre de navigation HTML bootstrap 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>

Fondamentalement, vous obtenez un élément d'étiquette pour l'entrée (type = soumettre), puis vous masquez la soumission d'entrée réelle. Les utilisateurs peuvent cliquer sur l'élément d'étiquette et continuer à envoyer le formulaire.

Christian Michael
la source
9
Pour moi, c'est le meilleur des deux mondes. Vous obtenez le style que vous souhaitez et n'utilisez pas de lien ou de javascript.
AaronLS
1
Bien que cela applique le style et ait fière allure, cela empêche le formulaire d'être soumis lorsque l'utilisateur a appuyé sur Entrée dans un champ de saisie. (Testé sur FF17 uniquement)
Richard
1
De toute évidence, la meilleure solution pour moi. À votre santé!
Armel Larcier
14

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

<button class="btn btn-primary icon-save">Button With Icon</button>
pengemizt
la source
11

Vous pouvez ajouter un <a/> avec l'icône quelque part et lui associer une action JavaScrit qui soumet le formulaire. Si nécessaire, le nom et la valeur du nom + de la valeur du bouton d'envoi d'origine peuvent être présents dans un attribut masqué. C'est facile avec jQuery, permettez-moi d'éviter la version JavaScript pure.

Supposons que ce soit la forme originale:

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

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

... puis la jQuery magique:

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

Ou si vous voulez vous assurer que l'utilisateur peut toujours soumettre le formulaire - c'est ce que je ferais à votre place -, vous pouvez laisser le bouton d'envoi normal dans le formulaire et le masquer avec jQuery .hide (). Il garantit que la connexion fonctionne toujours sans JavaScript et jQuery selon le bouton d'envoi normal (il y a des gens qui utilisent des liens, w3m et des navigateurs similaires), mais fournit un bouton fantaisie avec icône si possible.

Sandor Bedo
la source
Je vous demande de répondre à ma question si vous en avez une idée. stackoverflow.com/questions/11295378/…
Krishnaprasad Varma
8

Il existe une nouvelle façon de procéder avec bootstrap 3:

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

C'est sur la page des glyphiques de bootstrap sous "comment utiliser":

Justin
la source
7

Je voulais les icônes Twitter Bootstrap dans un formulaire Rails de base et suis tombé sur ce post. Après avoir cherché un peu, j'ai trouvé un moyen facile de le faire. Je ne sais pas si vous utilisez Rails, mais voici le code. La clé était de passer un bloc à l'assistant de visualisation link_to:

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

Si vous n'utilisez pas Rails, voici le code HTML de sortie pour les liens avec des icônes (pour les boutons de modification, de suppression et de soumission)

# 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 une capture d'écran du résultat final: http://grab.by/cVXm

Brett Sanders
la source
2
Alors, que se passe-t-il lorsqu'un moteur de recherche explore votre site, voit un lien appelé «Supprimer», décide «Oh, je pense que je vais suivre ce lien» et commence à jouer avec votre base de données? On m'a toujours dit que les modifications devaient toujours être effectuées avec des opérations non GET pour cette raison.
Asfand Qazi
Il utilise probablement une autorisation pour supprimer des liens, la plupart des gens le font.
Noz
2
Hors sujet car l'OP ne posait pas de question sur les rails mais ... Rails utilise en effet une méthode de suppression lors de l'intégration de ce type de lien hypertexte via javascript discret. Si quelqu'un demandait ce lien directement, la valeur par défaut serait de présenter cet enregistrement, et non de le supprimer. Voir cette réponse pour plus de détails: stackoverflow.com/a/2809412/252290
levous
Il s'agit spécifiquement d'un bouton d'envoi, pas d'une balise d'ancrage.
pixelearth
6

Il y a un moyen, comment introduire des glyphicons (bootstrap) input type="submit". Utilisation de l'arrière-plan multiple CSS3.

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 arrière-plans se chevauchent, en haut sera le premier arrière-plan de la background:notation. Ainsi, en haut se trouve l'arrière-plan qui est en retrait 16pxdu côté gauche ( 16pxest la largeur d'un glyphicon unique), au niveau inférieur est entier glyphicons-halflings.pnget au niveau inférieur (couvre tout l'élément) est le même dégradé d'arrière-plan qu'au niveau supérieur.

-48px 0pxest la coupe pour l'icône de recherche ( icon-search) mais il est facile d'afficher n'importe quelle autre icône.

Si quelqu'un a besoin d'un :hovereffet, l' arrière - plan doit être tapé à nouveau sous la même forme.

iiic
la source
Bien que cela puisse fonctionner, ce n'est certainement pas aussi élégant que d'utiliser <button type = "submit"> et sera plus difficile à maintenir.
Richard
4

Je l'ai fait fonctionner, mais il y a quelques mises en garde que je n'ai pas encore résolues.

Quoi qu'il en soit, voici comment cela se fait:

Prenez votre bouton d'entrée moyen:

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

Découpez l'icône que vous souhaitez pour vos boutons d'envoi dans le fichier sprite de glyphicons, assurez-vous qu'il s'agit d'une image 14 x 14 px. Oui, dans des circonstances idéales, vous pouvez réutiliser le sprite, et si quelqu'un le comprend, je serai heureux de savoir comment cela se 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;
}

Fonctionne dans Firefox 14, Chrome 21

Ne fonctionne pas dans IE 9

tl; dr: Avec un peu de CSS, vous pouvez placer automatiquement des icônes sur vos boutons d'envoi, mais vous devez placer l'icône dans un fichier séparé et cela ne fonctionnera pas dans Internet Explorer.

Moeri
la source
1

Je pense que c'est une solution à votre problème

<input type="text" placeholder="search here" />
<button type="submit"><i class="glyphicon glyphicon-search"></button>
naveen
la source
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
la source
1
La question était à propos de soumettre
Grigory Kislin
C'est bootstrap 3 - la question concernait le format bootstrap 2, qui utilise un autre format pour afficher les icônes.
Calaelen
-1

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>
Livia
la source