如何添加glyphicons到rails link_to助手 – Bootstrap 3

我一直在寻找一个很好的解释如何添加glyphicons到rails link_tobutton_to助手,但我发现很less。 到目前为止,我所收集到的信息使我意识到:

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

这不起作用,我想我发现的一个例子是从Bootstrap 2。任何人都可以指向我一个很好的资源,或提供一个快速的例子吗? 提前致谢!

我在这里find了答案

在rails中的字形链接的基本forms如下所示:

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

根据需要修改。 在这个链接的第二个例子不适合我,我假设,因为我使用rails_bootstrap_sassgem? 无论如何,上面的表格为我工作。

如果你正在寻找一个内联方法,这适用于我:

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

<i></i>可以在'Dashboard'任一侧我只用Bootstrap 3在Rails 4中testing了这个特定的例子,但是这是我在Rails 3和Bootstrap 2中使用的方法

希望这有助于未来的人

编辑:删除逗号正确呈现graphics。

根据我的经验,@settheline的答案几乎是理想的,但在我的网站上,它改变了相对于没有图标的其他button的字体。 所以我最终做了这样的事情:

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

这似乎保持字体等于其他无图标的button。

使用苗条,这里的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 

可以添加更多的文字/等。 到button,只是不要嵌套在graphics的跨度下。

你可以使用font-awesome-rails gem来达到这个目的,然后:

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

对于那些避免不必要的重复冗长的事情

我在我的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! 我也碰巧注意到这个build议(目前v3.3.5) docos :

不要与其他组件混合图标类不能与其他组件直接组合。 他们不应该与同一元素上的其他类一起使用。 相反,添加一个嵌套<span>并将图标类应用于<span>

仅用于空元素图标类只能用于不包含文本内容且没有子元素的元素。

使用HAML:

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