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

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

   Sign in  

Je pense que vous pouvez utiliser des étiquettes à cet effet. Voici un exemple de la barre de navigation HTML du bootstrap twitter:

 
   Search me   

Fondamentalement, vous obtenez un élément label pour l’entrée (type = submit), puis vous masquez la soumission réelle soumise. Les utilisateurs peuvent cliquer sur l’élément label et passer à travers la soumission du formulaire.

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

 Button With Icon 

Vous pouvez append un 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 et de la valeur du bouton d’envoi d’origine peuvent figurer dans un atsortingbut masqué. C’est facile avec jQuery, permettez-moi d’éviter la version JavaScript pure.

Supposons que ceci soit la forme originale:

Changer comme ça:

 
 ...other fields...   Let me in   

… et puis le 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 dans vos chaussures -, 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 personnes utilisant des liens, W3M et des navigateurs similaires), mais fournit un bouton fantaisie avec l’icône si possible.

Je voulais les icons Twitter Bootstrap dans un formulaire Rails de base et je suis tombé sur cet article. Après avoir cherché un peu, j’ai trouvé un moyen facile de le faire. Vous ne savez pas si vous utilisez Rails, mais voici le code. La clé était de transmettre un bloc à l’assistant link_to view:

  <% @products.each do |product| %>  <%= product.id %> <%= link_to product.name, product_path(product) %> <%= product.created_at %>  <%= link_to(edit_product_path(product), :class => 'btn btn-mini') do %> Edit  <% end %> <%= link_to(product_path(product), :method => :delete, :confirm => 'Are you sure?', :class => 'btn btn-mini btn-danger') do %> Delete  <% end %>   <% end %>   <%= link_to(new_product_path, :class => 'btn btn-primary') do %> New  <% end %> 

Si vous n’utilisez pas Rails, voici le HTML de sortie pour les liens avec les icons (pour les boutons edit, delete et new submit)

 # Edit Edit  # Delete  Delete  # New New  

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

Il existe une nouvelle façon de faire cela avec bootstrap 3:

   Star  

C’est sur la page des glyphicons bootstrap sous “comment utiliser”:

Il y a un moyen, comment obtenir les glyphicons (bootstrap) dans input type="submit" . En utilisant plusieurs arrière-plans css3.

HTML:

 
 …   

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 se trouvera le premier arrière-plan en background: – background: notation. Donc, en haut, il y a un arrière-plan de 16px à gauche ( 16px est la largeur d’un seul glyphicon), au niveau inférieur glyphicons-halflings.png et au niveau inférieur (couvre tout l’élément) est le même que pour le fond. haut niveau.

-48px 0px est l’icône de recherche de raccourci (recherche d’icons), mais il est facile d’afficher une autre icône.

Si quelqu’un a besoin d’un effet :hover , l’ arrière – plan doit être à nouveau saisi sous la même forme.

J’ai fait cela, mais il y a quelques réserves que je n’ai pas encore résolues.

En tout cas, c’est comme ça que ça se passe:

Prenez votre bouton de saisie moyen:

Découpez l’icône que vous voulez pour vos boutons d’envoi à partir du fichier sprite des glyphicons, assurez-vous qu’il s’agit d’une image 14×14 px. Oui, dans des circonstances idéales, vous pouvez réutiliser le sprite, et si quelqu’un le sait, je serai heureux d’entendre comment cela se passe. 🙂

Une fois que vous avez fait cela, vous pouvez écrire css pour votre bouton de saisie 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 icons 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.

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

Utilisez input-append avec des classes complémentaires

 
  .00  

            
   Search  

Print

Je suppose que cette meilleure façon fonctionne bien pour moi.

 
   Submit   Icon