Wie man Glyphicons zu Schienen hinzufügt link_to Helfer - Bootstrap 3

Question

Ich habe überall nach einer guten Erklärung gesucht, wie man Glyphicons zu Schienen link_to und button_to Helfern hinzufügt, aber ich habe sehr wenig gefunden. Was ich bisher gesammelt hat mich dazu geführt hat:

<li> 
    <%= link_to deals_path, class: "btn btn-default" do %> 
    <%= content_tag(:i, "Dasboard",:class=>' glyphicon, glyphicon-th-large') -%> 
    <% end %> 
</li> 

Dies obwohl nicht funktioniert und ich denke, das ein Beispiel, das ich aus Bootstrap gefunden war 2. Kann mir jemand auf eine gute Ressource zu diesem Punkt, oder ein kurzes Beispiel geben? Danke im Voraus!

Answer 1

ich die Antwort auf diesen here

Die Grundform eines Glyphe Link in Schienen wie folgt aussieht gefunden:

<%= link_to deals_path, class: "btn btn-default" do %> 
    <i class="glyphicon glyphicon-euro"></i> Dashboard 
<% end %> 

Bei Bedarf ändern. Das zweite Beispiel in diesem Link funktionierte nicht für mich, nehme ich an, weil ich das Juwel rails_bootstrap_sass verwende? Egal, die obige Form funktionierte für mich.

Answer 2

Sie können das font-awesome-rails Juwel für diesen Zweck, und dann tun:

<li><%= link_to raw(fa_icon("dashboard", class: "th-large"), deals_path, class: "btn btn-default" %> 

Answer 3

Wenn Sie sich für eine Inline-Methode suchen, arbeitet Dies ist für mich:

<%= link_to '<i class="glyphicon glyphicon-th-large"></i> Dasboard'.html_safe, deals_path, class: 'btn btn-default' %> 

Die <i></i> auf beiden Seiten des 'Dashboard' gehen kann ich nur dieses spezielle Beispiel aus in Rails 4 mit Bootstrap getestet haben 3 aber dies war die Methode, die ich vor in Rails 3 verwendet und Bootstrap 2

hoffte, das hilft jemand in der Zukunft

Edit: Entfernt Komma die glyphicon richtig zu machen.

Answer 4

Nach meiner Erfahrung ist die Antwort von @settheline fast ideal, aber auf meiner Website ändert sich die Schriftart relativ zu anderen Schaltflächen ohne Symbole. Also habe ich so etwas gemacht:

<%= link_to deals_path, class: "btn btn-default" do %> 
    <span class="glyphicon glyphicon-euro"></span> Dashboard 
<% end %> 

Und dies scheint die Schrift gleich zu anderen symbollosen Tasten zu halten.

Answer 5

Mit schlanken, hier ist link_to:

= link_to deals_path 
     span.glyphicon.glyphicon-th-large 

und button_to:

= button_to deals_path, class: "btn btn-primary" 
     span.glyphicon.glyphicon-th-large 

Es ist möglich, mehr Text/etc hinzuzufügen. auch auf den Knopf, niste es nicht unter der Glyphonspanne.

Answer 6

& Für diejenigen, die unnötige Wiederholung der langatmigen Sache vermeiden würden ..

Ich schiebe so etwas in meinem app/helpers/application_helper.rb:

module ApplicationHelper 
    def glyph(icon_name_postfix, hash={}) 
    content_tag :span, nil, hash.merge(class: "glyphicon glyphicon-#{icon_name_postfix.to_s.gsub('_','-')}") 
    end 
end 

Beispiel .erb Nutzung:

<%= button_tag glyph("heart-empty", aria_hidden: "true", foo: "bar"), type: "button", class: "btn btn-default" %> 
<%= link_to glyph(:eye_open) + " Oook", some_path, class: "nav" %> 

Ich verwende dies in Rails4, aber ich denke, es ist auch in Rails3 funktionieren könnte

Ooook! Ich war zufällig auch diese Beratung vom Bootstrap (Zur Zeit v3.3.5) bemerken docos:

Sie nicht mit anderen Komponenten Icon Klassen mischen können nicht direkt mit anderen Komponenten kombiniert werden. Sie sollten nicht zusammen mit anderen Klassen für dasselbe Element verwendet werden. Fügen Sie stattdessen eine verschachtelte <span> und die Symbolklassen auf die <span>.

Nur für leere Elemente Symbolklassen sollten nur für Elemente verwendet werden, die keinen Textinhalt enthalten und keine untergeordneten Elemente enthalten.

Answer 7

Mit HAML:

= link_to deals_path, class: "btn btn-default" do 
    = "Dashboard" 
    %span.glyphicon.glyphicon-th-large