Как добавить глификон в рельсы link_to helper - Bootstrap 3

Я искал повсюду хорошее объяснение того, как добавить глификонов в рельсы 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>

Это не работает, и я думаю, что один из примеров, который я нашел, был из Bootstrap 2. Может ли кто-нибудь указать мне хороший ресурс на этом или предоставить быстрый пример? Спасибо заранее!

Ответы

Ответ 1

Я нашел ответ на этот здесь

Основная форма глифной ссылки в рельсах выглядит следующим образом:

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

Измените при необходимости. Второй пример в этой ссылке не работает для меня, я полагаю, потому что я использую камень rails_bootstrap_sass? Несмотря на это, эта форма работала для меня.

Ответ 2

Если вы ищете встроенный метод, это работает для меня:

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

<i></i> может идти по обе стороны от 'Dashboard'. Я тестировал этот конкретный пример только в Rails 4 с Bootstrap 3, но это был метод, который я использовал ранее в Rails 3 и Bootstrap 2

Надеюсь, это поможет кому-то в будущем

Изменить: Удаленная запятая для правильного отображения глификона.

Ответ 3

По моему опыту, ответ на @settheline почти идеален, но на моем сайте он меняет шрифт относительно других кнопок без значков. Поэтому я закончил делать что-то вроде этого:

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

И похоже, что шрифт равен другим кнопкам без значка.

Ответ 4

Использование slim, здесь 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

Можно добавить еще текст/и т.д. к кнопке, просто не вложите ее под глификон.

Ответ 5

С этой целью вы можете использовать драгоценный камень font-awesome-rails, а затем выполните следующие действия:

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

Ответ 6

& Для тех, кто избегал ненужного повторения долгой вещи.

Я запишу что-то вроде этого в моем 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>.

Только для использования в пустых элементах. Классы значков должны использоваться только для элементов, которые не содержат текстового содержимого и не имеют дочерних элементов.

Ответ 7

Использование HAML:

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