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

Question

Je souhaite utiliser les icônes de démarrage Twitter sur mes boutons d'envoi de saisie de formulaire.

Les exemples sur http://twitter.github.com/bootstrap/base-css.html # icons affiche principalement des hyperliens stylisés.

L'icône qui se rapproche le plus 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>

Answer 1

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

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

Answer 2

Je pense que vous pouvez utiliser des balises d'étiquette à cette fin.Voici un exemple de la barre de navigation HTML du 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>

En gros, vous obtenez un élément d'étiquette 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 à soumettre le formulaire.

Answer 3

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>

Answer 4

Vous pouvez ajouter un avec l'icône quelque part, et lier une action JavaScrit à lui, qui soumet le formulaire.Si nécessaire, le nom et la valeur du Le nom et 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>

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

... et ensuite 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 masquez-le avec jQuery .hide ().Cela garantit que la connexion fonctionne toujours sans JavaScript et jQuery selon le bouton d'envoi normal (il y a personnes utilisant des liens, w3m et navigateurs similaires), mais fournit un bouton fantaisie avec une icône si possible.

Answer 5

Il existe 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 bootstrap glyphicons sous "comment utiliser":

Answer 6

Je voulais les icônes Twitter Bootstrap dans un formulaire de base Rails 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 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 (pour un bouton d'édition, de suppression et de nouvelle 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

Answer 7

Il y a un moyen, comment obtenir les glyphicons (de 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 sera le premier arrière-plan à la notation background:. Donc, en haut se trouve l'arrière-plan qui est indenté 16px du côté gauche (16px est la largeur d'un seul glyphicon), au niveau inférieur est tout le glyphicons-halflings.png et au niveau inférieur (couvre tout l'élément) est le même dégradé d'arrière-plan qu'au niveau supérieur./ p>

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

Si quelqu'un a besoin d'un effet :hover, background doit être à nouveau saisi sous la même forme.

Answer 8

J'ai réussi à faire fonctionner cela, mais il y a quelques mises en garde que je n'ai pas encore résolues.

Quoi qu'il en soit, voici comment procéder:

Prenez votre bouton de saisie moyen:

<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 sprite glyphicons, assurez-vous qu'il s'agit d'une image 14x14 px.Oui, dans des circonstances idéales, vous pouvez réutiliser le sprite, et si quelqu'un comprend cela, 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 mettre 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.

Answer 9

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>

Answer 10

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

Answer 11

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

Answer 12

Je suppose que cette meilleure façon fonctionne 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>