Aggiungi icona per inviare il pulsante in Twitter Bootstrap 2

Voglio usare le icone di Twitter Bootstrap sui miei pulsanti di invio input modulo.

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

Il più vicino a cui sono arrivato è visualizzare l'icona 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>

È possibile utilizzare un tag pulsante anziché l'input

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

Penso che puoi usare i tag delle etichette per questo scopo. Ecco un esempio della barra di navigazione HTML bootstrap di 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>

Fondamentalmente ottieni un elemento etichetta per l'input (type = submit) e poi nascondi l'input effettivo. Gli utenti possono fare clic sull'elemento etichetta e continuare comunque con l'invio del modulo.

Penso che dovresti provare questo FontAwesome progettato per essere utilizzato con Twitter Bootstrap.

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

È possibile aggiungere un <a/> con l'icona da qualche parte e associare un'azione JavaScrit ad essa, che invia il modulo. Se necessario, il nome e il valore del nome + valore del pulsante di invio originale possono essere presenti in un attributo nascosto. È facile con jQuery, per favore permettimi di evitare la versione JavaScript pura.

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>

Modificalo 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 il magico jQuery:

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

O se vuoi assicurarti che l'utente possa sempre inviare il modulo - ecco cosa farei nei tuoi panni -, puoi lasciare il normale pulsante di invio nel modulo e nasconderlo con jQuery .hide (). Assicura che il login funzioni ancora senza JavaScript e jQuery in base al normale pulsante di invio (ci sono persone che usano link, w3m e browser simili), ma se possibile fornisce un pulsante di fantasia con icona.

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>

È nella pagina dei glifi di bootstrap sotto "come usare":

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

<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 si utilizzi Rails, ecco l'output HTML per i collegamenti con icone (per i pulsanti di modifica, eliminazione e invio nuovi)

# 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 finale: http://grab.by/cVXm

C'è un modo, come ottenere i glyphicons (di bootstrap) input type="submit". Utilizzando css3 sfondo multiplo.

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 più sfondi si sovrappongono, nella parte superiore verrà visualizzato il primo sfondo della background:notazione. Quindi nella parte superiore c'è lo sfondo che è rientrato 16pxdal lato sinistro ( 16pxè la larghezza del singolo glifo), nel livello inferiore è intero glyphicons-halflings.pnge nel livello inferiore (copre l'intero elemento) lo stesso gradiente di sfondo del livello superiore.

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

Se qualcuno ha bisogno di un :hovereffetto, lo sfondo deve essere nuovamente digitato nello stesso modulo.

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

Comunque, ecco come si fa:

Prendi il tuo pulsante di input medio:

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

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

Una volta 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 con Firefox 14, Chrome 21

Non funziona in IE 9

tl; dr: con un po 'di CSS puoi mettere automaticamente le icone sui tuoi pulsanti di invio, ma devi mettere l'icona in un file separato e non funzionerà in Internet Explorer.

Penso che sia una soluzione per il tuo problema

<input type="text" placeholder="search here" />
<button type="submit"><i class="glyphicon glyphicon-search"></button>

Utilizzare input-append con le classi aggiuntive

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

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>