2012-08-02 12 views
17

Der Versuch, Benutzerschriftart ehrfürchtige Symbole für meine Tasten einzubetten, aber ich kann es in der submit_tagWie font-awesome Symbole in submit_tag

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

Ausgang zu zeigen, erhalten:

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

Helfer:

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 

Wenn ich die html.html_safe Zeile des Helfers entferne, bekomme ich das gleiche. Es funktioniert nicht wie html_safe. Ich habe auch html = rohe (html) ohne Wirkung versucht.

+0

Sie Ehrfürchtig Icons Font arbeiten an allen als Input bekommen Werte? – dylanjha

+0

Sie können dies tun, wenn Sie die Übertragung an eine Schaltfläche ändern. Siehe [diese SO] (http://stackoverflow.com/questions/11686007/font-awesome-input-type-submit). – Chiperific

Antwort

19

Eingabe einreichen Tags nicht Erlaube verschachtelten HTML-Code, für den du ein Icon anzeigen musst.

Versuchen Sie stattdessen eine Taste:

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

Es lohnt sich einige Unterschiede zwischen dem Verhalten der Schaltfläche Tags und Eingangs-Tags einreichen erwähnens. Check out this SO question für eine Reihe von tollen Details. Ich persönlich hatte keine Probleme mit Button-Tags in meinen Anwendungen. YMMV in Bezug auf verschiedene Browser und so, obwohl.

1

Ich denke, Sie werden von html_safe vom Helfer loswerden müssen, und verwenden Sie raw icon("search") statt icon("search") nur

und als BaronVonBraun sagt - verwenden button statt input[submit]

2

Sie können Symbole auf Ihren HTML-Code hinzufügen, wie folgt aus:

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

Wenn Sie jedoch wollen Platz Symbole in Rails link_to Helfer den ilink_to Helfer-Methode verwenden. Gehen Sie folgendermaßen vor:

1) In den Edelstein zu Ihrem Vermögen Gruppe in der Gemfile: Juwel 'weniger-Schienen-fontawesome'

2) Führen Sie Bündel installieren:

3) Seien sicher, dass @import 'fontawesome'; ist in app/assets/stylesheetes/bootstrap_and_overrides.css.less unkommentiert.

4) Verwenden Sie die * ilink_to * Hilfsmethode anstelle der * link_to * Hilfsmethode.

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

Obs: der Link-Text mit dem Symbol Name Precede icon- Präfix

abgezogen Diese Anleitung hier: https://github.com/wbzyl/less-rails-fontawesome

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