come mettere icona nelle guide pulsante di invio

Sto usando Bootstrap e voglio mettere un'icona nel pulsante di invio per un modulo.
ecco il codice:come mettere icona nelle guide pulsante di invio

<%= f.submit "Submit for Approval <i class='icon-share-alt icon-white'></i>", 
           class: "button_green" %>

HTML generato:

<input type="submit" value="Submit for Approval &lt;i class='icon-share-alt icon-white'&gt;&lt;/i&gt;" name="commit" class="button_green">

Ho provato ad aggiungere sia crudo e html_safe al testo, ma nessuno dei due sembrava funzionare.
Conosco una soluzione per far sì che la classe sia un'immagine con l'icona già presente, ma mi piacerebbe farlo senza creare immagini/css aggiuntivi. eventuali suggerimenti?

fonte

2012-10-31 Austin

Questo è un problema sul lato client risolto tramite CSS. Si prega di mostrare il codice lato client, non il codice Rails. –

sto chiedendo specificamente se c'è un modo per farlo con rails/erb. Voglio che l'html generato includa l'icona nel testo del pulsante, non usando css o immagini aggiuntive – Austin

Non sono esperto di Rails, ma quell'HTML dovrebbe generare un'icona se Bootstrap è incluso correttamente. Sembra un problema con Rails. – Sara

È possibile farlo utilizzando il button_tag invece:

<%= button_tag(:class => "button_green") do %> 
    Submit for Approval <i class="icon-share-alt icon-white"></i> 
<% end %>

Questo creerà un elemento <button type="submit"></button> con l'icona e wordage all'interno. Ho provato e funziona. L'azione predefinita per button_tag deve essere inoltrata, quindi se hai bisogno di un'azione diversa (ad esempio cancella), puoi utilizzare l'opzione :type => "button" per sovrascrivere il comportamento di invio predefinito.

Edit: Per Bootstrap 3, i nomi icona di classe sono cambiati, così si dovrebbe mettere

<span class="glyphicon-white glyphicon-share-alt white"></span>

Avviso, non c'è più una classe speciale per le icone bianche. Basta creare una classe css .white e inserire color: #fff;. Semplice. Puoi utilizzare qualsiasi stile di colore o di testo che ti piace, poiché le icone ora sono un font.

questione connessa: Add Icon to Submit Button in Twitter Bootstrap 2 e How do I change Bootstrap 3's glyphicons to white?

fonte

2012-10-31 21:50:53 GorrillaMcD

Non mi piace questa soluzione perché non fa uso della variabile f ... anche se il risultato è probabilmente lo stesso. –

Funziona comunque ... – blnc

.button_green { 
    background-image:url(...your image path...); 
    background-repeat:no-repeat; 
    padding-left:30px; 
}

Potrebbe essere necessario regolare il riempimento in modo che corrisponda alla dimensione dell'icona.

fonte

2012-10-31 21:40:10

come mettere icona nelle guide pulsante di invio

risposta

Problemi correlati