web-dev-qa-db-fra.com

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

Je souhaite utiliser les icônes Twitter bootstrap sur mes boutons de soumission de saisie de formulaire.

Les exemples sur http://Twitter.github.com/bootstrap/base-css.html#icons affichent principalement des liens hypertexte stylisés.

Le plus proche que je suis venu est d'obtenir l'icône affichée à 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>
twitter-bootstraptwitter-bootstrap-2
222
AyKarsi

Vous pouvez utiliser une balise de bouton au lieu de saisir

<button type="submit" class="btn btn-primary">
  <i class="icon-user icon-white"></i> Sign in
</button>
387
Simon Cunningham

Je pense que vous pouvez utiliser des étiquettes pour cela. Voici un exemple de la barre de navigation HTML bootstrap de 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 label pour l'entrée (type = submit), puis vous masquez la soumission d'entrée réelle. Les utilisateurs peuvent cliquer sur l'élément d'étiquette et continuer avec la soumission du formulaire.

65
Christian Michael

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

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

Vous pouvez ajouter un <a/> avec l'icône quelque part et y associer une action JavaScrit qui soumet le formulaire. Si nécessaire, le nom et la valeur du nom + la valeur du bouton d'envoi d'origine peuvent figurer dans un attribut masqué. C'est facile avec jQuery, permettez-moi s'il vous plaît d'éviter la version JavaScript pure.

Supposons qu'il s'agisse de la forme d'origine:

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

Changez-le comme ça:

<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 ensuite la magie jQuery:

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

Ou si vous voulez vous assurer que l'utilisateur peut toujours envoyer le formulaire (c'est ce que je ferais dans votre peau), 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 conformément au bouton d'envoi normal (certaines personnes utilisent des liens, w3m et navigateurs similaires), mais fournit un bouton de fantaisie avec une icône si possible.

10
Sandor Bedo

Je voulais utiliser les icônes Twitter Bootstrap vers un formulaire de base Rails et je suis tombé sur ce message. 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 passer un bloc à l’assistant 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 %>

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

# 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

7
Brett Sanders

Il y a une nouvelle façon de faire cela 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 glyphiques bootstrap sous "comment utiliser":

7
Justin

Il y a un moyen, comment obtenir des glyphicons (bootstrap) dans input type="submit". Utilisation de plusieurs arrière-plans 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 se trouve le premier arrière-plan à la notation background:. Donc, en haut, le fond est en retrait 16px du côté gauche (16px est la largeur du glyphicon unique), au niveau inférieur correspond à l'ensemble glyphicons-halflings.png et au niveau inférieur (couvre l'élément entier ) est le même dégradé d’arrière-plan qu’au niveau supérieur.

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

Si quelqu'un a besoin d'un effet :hover, background doit être saisi à nouveau dans le même formulaire.

6
iiic

Cela a fonctionné, 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 de saisie moyenne:

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

Découpez l'icône que vous voulez pour vos boutons d'envoi dans le fichier glyphicons Sprite, assurez-vous qu'il s'agit bien d'une image 14x14 px. Oui, dans des circonstances idéales, vous pouvez réutiliser le Sprite et, si quelqu'un y parvient, je serai heureux de savoir comment cela se passera. :-)

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 automatiquement mettre des icônes sur vos boutons de soumission, mais vous devez placer l’icône dans un fichier séparé et cela ne fonctionnera pas dans Internet Explorer.

4
Moeri
<!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>
1
Ganesh Putta

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

tilisez input-append avec des classes add-on

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