2012-08-02 16 views
17

Cercando di carattere all'utente icone impressionanti per i miei tasti, ma non posso ottenere per mostrare nel submit_tagCome incorporare le icone dei font-impressionante in submit_tag

<%= submit_tag icon("search"), class: "btn-primary", style:"width:40px;" %> 

uscita:

<input class="btn-primary" name="commit" style="width:40px;" type="submit" value="&lt;i class='icon-search' style='font-size:1em' &gt;&lt;/i&gt;"> 

aiutante:

def icon(name, size=1) 
    #icon("camera-retro") 
    #<i class="icon-camera-retro"></i> 

    html = "<i class='icon-#{name}' " 
    html += "style='font-size:#{size}em' " 
    html += "></i>" 
    html.html_safe 
end 

quando rimuovo la riga html.html_safe dell'helper ottengo la stessa cosa. è come html_safe non funziona. Ho anche provato html = raw (html) senza alcun effetto.

+0

si può ottenere caratteri icone fantastico lavorare affatto come input valori? – dylanjha

+0

È possibile farlo se si modifica l'invio a un pulsante. Vedi [questo SO] (http://stackoverflow.com/questions/11686007/font-awesome-input-type-submit). – Chiperific

risposta

19

ingresso presentare le tag no consentire l'HTML nidificato, che è necessario mostrare un'icona.

Prova utilizzando invece un pulsante:

<button class='btn btn-primary' style='width:40px;'> 
    <%= icon("search") %> 
</button> 

Vale la pena notare alcune differenze tra il comportamento dei tag dei pulsanti e ingresso presentare tag. Dai un'occhiata allo this SO question per un sacco di fantastici dettagli. Personalmente non ho avuto problemi con l'uso di tag pulsante nelle mie applicazioni. YMMV rispetto ai diversi browser e simili, comunque.

1

penso che è necessario sbarazzarsi di html_safe dal aiutante, e utilizzare raw icon("search") invece di icon("search")

e come dice BaronVonBraun - utilizzare button piuttosto che input[submit]

2

È possibile aggiungere icone per il vostro codice HTML, in questo modo:

<i class="icon-search"></i> 

Tuttavia, se si desidera posto le icone in Rails link_to aiutante utilizzare il metodo ilink_to aiutante. Seguire la procedura riportata di seguito:

1) Aggiungere la gemma al gruppo attivi nel Gemfile: gemma 'meno-rails-fontawesome'

2) Eseguire bundle install:

3) Essere sicuro che @import 'fontawesome'; non è commentato in app/assets/stylesheetes/bootstrap_and_overrides.css.less.

4) Utilizzare il metodo helper * ilink_to * anziché * link_to * metodo helper.

<%= ilink_to "upload-alt", "Edit", edit_post_path(post), class: 'btn btn-mini' %> 

Obs: Far precedere il testo del link con il nome dell'icona tolse prefisso icon-

Queste istruzioni sono qui: https://github.com/wbzyl/less-rails-fontawesome

4
<%= link_to(status, :method=>:delete) do %> 
    <i class='icon-trash icon-large'></i> 
<% end %> 
Problemi correlati