ruby on rails - instalar - Cómo agregar glifos a los raíles link_to helper-Bootstrap 3

instalar bootstrap sass

Question

He estado buscando por todas partes una buena explicación de cómo agregar glyphicons a los rieles link_to y button_to helpers, pero he encontrado muy poco. Lo que he reunido hasta ahora me ha llevado a esto:

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

Sin embargo, esto no funciona y creo que el único ejemplo que encontré fue el de Bootstrap 2. ¿Alguien puede indicarme un buen recurso al respecto o dar un ejemplo rápido? ¡Gracias por adelantado!

Answer 1

& Para aquellos que evitarían la repetición innecesaria de la cosa larga ...

meto algo así en mi 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

Ejemplo de uso de .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" %>

Estoy usando esto en Rails4 pero creo que también podría funcionar en Rails3

Ooook! También sucedió que noté este consejo desde el bootstrap (actualmente v3.3.5) docos :

No mezclar con otros componentes Las clases de iconos no se pueden combinar directamente con otros componentes. No deben usarse junto con otras clases en el mismo elemento. En su lugar, agregue un <span> anidado y aplique las clases de iconos al <span> .

Solo para uso en elementos vacíos Las clases de iconos solo se deben usar en elementos que no contengan contenido de texto y no tengan elementos secundarios.

Answer 2

En mi experiencia, la respuesta de @settheline es casi ideal, pero en mi sitio web cambia la fuente relativa a otros botones sin iconos. Así que terminé haciendo algo como esto:

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

Y esto parece mantener la fuente igual a otros botones sin icono.

Answer 3

Encontré la respuesta a esto here

La forma básica de un enlace de glifo en rieles se ve así:

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

Modificar según sea necesario. El segundo ejemplo en ese enlace no funcionó para mí, supongo que porque estoy usando la gema rails_bootstrap_sass? De todos modos, la forma anterior funcionó para mí.

Answer 4

Puede usar la gema font-awesome-rails para este propósito, y luego hacer:

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

Answer 5

Si estás buscando un método en línea, esto funciona para mí:

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

El <i></i> puede ir a ambos lados del ''Dashboard'' Solo he probado este ejemplo en Rails 4 con Bootstrap 3, pero este fue el método que utilicé anteriormente en Rails 3 y Bootstrap 2

Espero que esto ayude a alguien en el futuro

Editar: se eliminó la coma para renderizar el glyphicon correctamente.

Answer 6

Usando HAML:

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

Answer 7

Usando slim, aquí está link_to :

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

y button_to :

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

Es posible agregar más texto / etc. al botón también, simplemente no lo anides debajo del tramo del glyphicon.