web-dev-qa-db-ja.com

グリフィコンをRails link_to helper-Bootstrap 3に追加する方法

私はグリフィコンをRails link_toおよびbutton_toヘルパー、しかし私はほとんど見つけませんでした。私がこれまでに集めたものは、これに私を導いた：

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

しかし、これはうまくいきません。私が見つけた1つの例は、Bootstrap 2.からだと思います。

ruby-on-railstwitter-bootstrapglyphicons
48
settheline

私はこれに対する答えを見つけました こちら

Railsのグリフリンクの基本形式は次のようになります。

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

必要に応じて変更します。 Rails_bootstrap_sass gemを使用しているため、そのリンクの2番目の例はうまくいきませんでした。とにかく、上記のフォームは私のために働いた。

102
settheline

あなたがインラインメソッドを探しているなら、これは私のために働いています：

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

<i></i>は'Dashboard' Rails 4 with Bootstrap 3でこの特定の例をテストしただけですが、これはRails 3およびBootstrap 2

これが将来誰かを助けることを願っています

編集：グリフィコンを正しくレンダリングするためにコンマを削除しました。

28
DazBaldwin

私の経験では、@ setthelineによる回答はほぼ理想的ですが、私のWebサイトでは、アイコンのない他のボタンに比べてフォントが変更されます。だから私はこのようなことをすることになりました：

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

そして、これはフォントを他のアイコンのないボタンと同等に保つようです。

18
alexvicegrab

スリムを使用して、ここにlink_to：

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

およびbutton_to：

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

テキストなどを追加することができます。ボタンにも、グリフィコンのスパンの下に入れ子にしないでください。

3
anitdas

この目的でfont-awesome-Rails gemを使用して、次の操作を実行できます。

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

長いものの不必要な繰り返しを避けたい人のために。

私の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


例.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" %>


私はRails4でこれを使用していますが、Rails3でも動作する可能性があると思います


Ooook！また、bootstrap（現在v3.3.5） docos ：

他のコンポーネントと混同しないでくださいアイコンクラスを他のコンポーネントと直接組み合わせることはできません。同じ要素の他のクラスと一緒に使用しないでください。代わりに、ネストされた<span>を追加し、アイコンクラスを<span>に適用します。

空の要素でのみ使用しますアイコンクラスは、テキストコンテンツを含まず、子要素を持たない要素でのみ使用する必要があります。

1
violet313

HAMLの使用：

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