webentwicklung-frage-antwort-db.com.de

So fügen Sie Glyphicons zu Rails link_to helper - Bootstrap 3

Ich habe überall nach einer guten Erklärung gesucht, wie man Glyphicons zu Rails link_to Und button_to - Helfern hinzufügt, aber ich habe sehr wenig gefunden Ich habe mich bisher versammelt, hat mich dazu geführt:

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

Dies funktioniert jedoch nicht und ich denke, das einzige Beispiel, das ich gefunden habe, war von Bootstrap 2. Kann jemand mich auf eine gute Ressource dazu verweisen oder ein schnelles Beispiel liefern? Vielen Dank im Voraus!

48
settheline

Ich fand die Antwort auf diese hier

Die Grundform eines Glyphenlinks in Rails sieht folgendermaßen aus:

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

Ändern Sie nach Bedarf. Das zweite Beispiel in diesem Link hat bei mir nicht funktioniert. Ich gehe davon aus, dass ich das Juwel Rails_bootstrap_sass verwende. Unabhängig davon hat das obige Formular für mich funktioniert.

102
settheline

Wenn Sie eine Inline-Methode suchen, funktioniert dies für mich:

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

Der <i></i> Kann auf beiden Seiten des 'Dashboard' Stehen. Ich habe dieses Beispiel nur in Rails 4 mit Bootstrap getestet = 3, aber dies war die Methode, die ich zuvor in Rails 3 und Bootstrap 2 verwendet habe

Hoffe das hilft jemandem in der Zukunft

Bearbeiten: Das Komma wurde entfernt, um das Glyphikon korrekt darzustellen.

28
DazBaldwin

Meiner Erfahrung nach 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 anderen ikonenlosen Tasten gleich zu halten.

18
alexvicegrab

Mit slim ist hier 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. Verschachteln Sie den Button nicht unter dem Glyphicon.

3
anitdas

Du kannst den ... benutzen font-awesome-Rails zu diesem Zweck gem, und dann tun:

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

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

ich schiebe so etwas in meinen 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 für die Verwendung von .erb:

<%= 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 könnte auch in Rails3 Funktionieren.


Ooook! Ich bemerkte auch diesen Hinweis aus der bootstrap (Derzeit v3.3.5) docos :

Nicht mit anderen Komponenten mischen Symbolklassen 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 ein verschachteltes <span> Hinzu und wenden Sie die Symbolklassen auf das <span> An.

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

1
violet313

Verwendung von HAML:

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