50

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 のものだと思います。誰かがこれに関する良いリソースを教えてくれますか、または簡単な例を提供してくれますか? 前もって感謝します！

4

8 に答える 8

107

ここでこれに対する答えを見つけました

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

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

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

于 2013-12-31T23:10:59.050 に答える
28

インラインメソッドを探している場合、これは私にとってはうまくいきます:

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

Rails 4 と Bootstrap 3 でこの<i></i>特定の'Dashboard'例をテストしただけですが、これは Rails 3 と Bootstrap 2 で以前に使用した方法でした

これが将来誰かに役立つことを願っています

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

于 2014-03-12T17:01:56.087 に答える
18

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

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

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

于 2014-05-20T22:56:11.467 に答える
2

HAML の使用:

= link_to deals_path, class: "btn btn-default" do
  = "Dashboard"
  %span.glyphicon.glyphicon-th-large
于 2016-04-11T18:34:54.197 に答える
1

font-awesome-railsこの目的で gem を使用して、次のことを行うことができます。

<li><%= link_to raw(fa_icon("dashboard", class: "th-large"), deals_path, class: "btn btn-default" %>
于 2013-12-20T01:55:31.560 に答える
1

&長々としたことの不必要な繰り返しを避けたい人のために..

私は私の中にこのようなものを押し込みます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


うおっ！また、たまたま、ブートストラップ (現在 v3.3.5) docos からのこのアドバイスに気付きました:

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

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

于 2015-08-14T00:08:54.233 に答える
-1

追加の gem をインストールせずに (fontawasome) アイコンを適用する、より速くて簡単な方法があります。

次のパターンに従うことができます。

          <%= link_to root_path, class: "nav-link" do %>
            <i class="fas fa-pencil-alt"></i>
          <% end %>

もちろん、最初に FONTAWASOME からキット FREE アカウントを作成し、アイコンを使用するために頭application.html.erbの中で設定する必要があります。こちらの手順に従って、Fontawasome でアカウントを作成します(まだお持ちでない場合)。

例が必要な場合は、GitHubの私のリポジトリをチェックしてください。

于 2021-04-07T18:47:03.827 に答える