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

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>

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>

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.

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>

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.

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

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

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.

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.

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>

Utilisez input-append avec des classes complémentaires

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