如何添加glyphicons到rails link_to助手 - 引導3

我一直在尋找一個很好的解釋如何添加glyphicons到rails link_to和button_to幫手，但我發現很少。什麼到目前爲止，我已經收集已使我這個：如何添加glyphicons到rails link_to助手 - 引導3

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

這不工作，雖然，我認爲一個例子，我發現從引導2.任何人都可以點我一個很好的資源這一點，或者提供一個簡單的例子？提前致謝！

來源

2013-12-20 settheline

我找到了答案，這here

在軌字形鏈路的基本形式如下：

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

根據需要進行修改。該鏈接中的第二個例子並不適用於我，我假設因爲我使用了rails_bootstrap_sass gem？無論如何，上面的表格對我有用。

來源

2013-12-31 23:10:59 settheline

可以使用font-awesome-rails寶石爲了這個目的，然後執行：

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

來源

2013-12-20 01:55:31 Stoic

嗯...我有字體真棒護欄去，但不知道在哪裏的逗號都應該在這裏猶豫。看起來你要麼在最後缺少一個，要麼在'fa_icon'之後多加一個？ – settheline

進一步搜索後，我不需要使用字體引導來使用Bootstrap字形。我在上面回答。 – settheline

如果你正在尋找一個直線排列方式，這對我的作品：

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

的<i></i>可以去'Dashboard'兩側的我只對Rails 4測試這個特殊的例子了自舉3但是這是對Rails 3之前我使用的方法和Bootstrap 2

希望這有助於有人在未來

編輯：刪除逗號來正確地呈現glyphicon。

來源

2014-03-12 17:01:56 DazBaldwin

從3升級到rails 4後，此內聯解決方案修復了以前以do ... end格式設置的斷開鏈接。 – Stephen

根據我的經驗，@settheline的答案几乎是理想的，但在我的網站上，它改變了相對於沒有圖標的其他按鈕的字體。所以我最終做了這樣的事情：

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

而這似乎保持字體等於其他無圖標的按鈕。

來源

2014-05-20 22:56:11 alexvicegrab

經過一段時間之後發現了這一點 - 如果您在啓動時應用glyphicon類以及按鈕類的軌道問題，那麼這就是您一直在尋找的答案！謝謝！ –

優雅的解決方案 – Deano

採用超薄，這裏的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

這有可能增加更多的文字/等。也可以將按鈕放在按鈕的下面。

來源

2014-07-16 19:44:33 anitdas

&對於那些避免不必要的重複冗長的事情..

我推這樣的事情在我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！我還碰巧注意到從引導（目前v3.3.5）此提醒docos：

不要與其他部件圖標類不能與其他組件可以直接結合混合。它們不應該與其他類一起使用。相反，添加一個嵌套的<span>和將圖標類應用到<span>。

僅用於空元素圖標類只應用於不包含文本內容且沒有子元素的元素。

來源

2015-08-14 00:08:54 violet313

使用HAML：

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

來源

2016-04-11 18:34:54

如何添加glyphicons到rails link_to助手 - 引導3

回答

相關問題