Aggiungi icona per inviare il pulsante in Twitter Bootstrap 2

Question

Voglio usare le icone bootstrap di Twitter sui pulsanti di invio del mio modulo.

Gli esempi su http://twitter.github.com/bootstrap/base-css.html#icons Mostra principalmente i collegamenti ipertestuali in stile.

Il più vicino che ho arrivato è ottenere l'icona visualizzata accanto al pulsante, ma non all'interno.

<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

È possibile utilizzare un tag pulsante anziché input

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

Answer 2

Penso che puoi usare i tag dell'etichetta per questo scopo. Ecco un campione di Twitter Bootstrap HTML Navbar:

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

Fondamentalmente si ottiene un elemento etichetta per l'input (type = invia) e quindi nascondi l'ingresso effettivo invio. Gli utenti possono fare clic sull'elemento etichetta e comunque superare l'invio del modulo.

Answer 3

Penso che dovresti provare questo Fontawesome Progettato per essere utilizzato con Twitter Bootstrap.

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

Answer 4

Puoi aggiungere un u003Ca/>icona da qualche parte e legare un'azione Javascrit ad essa, che presenta la forma. Se necessario, il nome e il valore del nome del pulsante di invio originale+il valore possono essere presenti in un attributo nascosto. È facile con JQuery, per favore, permettimi di evitare la versione JavaScript pura.u003C/a>

Supponiamo che questa sia la forma originale:

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

Cambiarlo in questo modo:

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

... e poi la magica jQuery:

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

O se vuoi assicurarti che l'utente possa sempre inviare il modulo-questo è quello che farei nelle tue scarpe, puoi lasciare il normale pulsante di invio nel modulo e nasconderlo con jQuery .hide (). Assicura che l'accesso funzioni ancora senza JavaScript e JQuery secondo il normale pulsante di invio (ci sono persone che utilizzano collegamenti, W3M e browser simili), ma fornisce un pulsante di fantasia, se possibile.

Answer 5

C'è un nuovo modo per farlo con Bootstrap 3:

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

È sul Glyphicon Bootstrap Pagina sotto "Come usare":

Answer 6

Volevo le icone Bootstrap di Twitter a un modulo di base e mi sono imbattuto in questo post. Dopo aver cercato un po ', ho capito un modo semplice per farlo. Non sono sicuro se stai usando Rails, ma ecco il codice. La chiave era passare un blocco al supporto Link_to Visualizza:

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

Nel caso in cui non tu stia usando Rails, ecco l'HTML di output per i collegamenti con icone (per una modifica, eliminazione e nuovi pulsanti di invio)

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

Ed ecco un link allo screenshot del risultato finito:http://grab.by/cvxm

Answer 7

C'è un modo, come ottenere i gliconi (bootstrap) in input type="submit". Utilizzando lo sfondo multiplo CSS3.

Html:

<form class="form-search">
   …
   <input type="submit" value="Search">
</form>

e 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 */
}

Se si sovrappongono più sfondi, nella parte superiore sarà il primo sfondo al background: notazione. Quindi nella parte superiore c'è uno sfondo che è rientrato 16px dal lato sinistro (16px è larghezza del singolo glicio), a livello inferiore è intero glyphicons-halflings.png E a livello inferiore (copre l'intero elemento) è lo stesso gradiente di sfondo del livello superiore.

-48px 0px è il taglio per l'icona di ricerca (icon-search) ma è facile mostrare qualsiasi altra icona.

Se qualcuno ha bisogno di un :hover effetto, sfondo deve essere nuovamente digitato nella stessa forma.

Answer 8

Ho fatto funzionare questo, ma ci sono alcuni avvertimenti che non ho ancora risolto.

Comunque, è così che è fatto:

Prendi il tuo pulsante di input medio:

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

Taglia l'icona che desideri per i tuoi pulsanti di invio dal file Glyphicons Sprite, assicurati che sia un'immagine 14x14 px. Sì, in circostanze ideali potresti riutilizzare lo sprite e se qualcuno lo scoprirò, sarò felice di sentire come è fatto. :-)

Una volta che l'hai fatto, puoi scrivere CSS per il tuo pulsante di input in questo modo:

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

Funziona in Firefox 14, Chrome 21

Non funziona in IE 9

TL; DR: con un po 'di CSS puoi mettere automaticamente le icone sui pulsanti di invio, ma è necessario inserire l'icona in un file separato e non funzionerà in Internet Explorer.

Answer 9

Penso che sia una soluzione per il tuo problema

<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

Usa input-append con classi aggiuntive

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

Answer 12

Immagino che questo modo migliore, funzioni bene per me.

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