web-dev-qa-db-fra.com

Comment ajouter des glyphicons à Rails link_to helper - Bootstrap 3

J'ai cherché partout une bonne explication sur la façon d'ajouter des glyphicons à Rails link_to et button_to aides, mais j'en ai trouvé très peu. Ce que j'ai rassemblé jusqu'à présent m'a conduit à ceci:

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

Cela ne fonctionne pas et je pense que le seul exemple que j'ai trouvé venait de Bootstrap 2. Quelqu'un peut-il me pointer vers une bonne ressource à ce sujet, ou fournir un exemple rapide? Merci d'avance!

ruby-on-railstwitter-bootstrapglyphicons
48
settheline

J'ai trouvé la réponse à cela ici

La forme de base d'un lien glyphe dans Rails ressemble à ceci:

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

Modifiez au besoin. Le deuxième exemple de ce lien n'a pas fonctionné pour moi, je suppose que j'utilise la gemme Rails_bootstrap_sass? Quoi qu'il en soit, le formulaire ci-dessus a fonctionné pour moi.

102
settheline

Si vous cherchez une méthode en ligne, cela fonctionne pour moi:

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

Le <i></i> peut aller de chaque côté du 'Dashboard' J'ai seulement testé cet exemple particulier dans Rails 4 avec Bootstrap 3 mais c'était la méthode que j'ai utilisée auparavant dans Rails 3 et Bootstrap 2

J'espère que cela aidera quelqu'un à l'avenir

Edit: suppression de la virgule pour rendre le glyphicon correctement.

28
DazBaldwin

D'après mon expérience, la réponse de @settheline est presque idéale, mais sur mon site Web, elle change la police par rapport aux autres boutons sans icônes. J'ai donc fini par faire quelque chose comme ça:

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

Et cela semble garder la police égale aux autres boutons sans icône.

18
alexvicegrab

En utilisant slim, voici link_to:

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

et button_to:

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

Il est possible d'ajouter plus de texte/etc. au bouton également, ne l'imbriquez pas sous la portée du glyphicon.

3
anitdas

Vous pouvez utiliser le font-awesome-Rails gem à cet effet, puis faites:

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

& Pour ceux qui éviteraient la répétition inutile de la chose de longue haleine ..

j'ai poussé quelque chose comme ça dans mon 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


Exemple d'utilisation 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" %>


J'utilise ceci dans Rails4 Mais je pense que cela pourrait aussi fonctionner dans Rails3


Ooook! j'ai également remarqué cet avis du bootstrap (actuellement v3.3.5) docos :

Ne pas mélanger avec d'autres composants Les classes d'icônes ne peuvent pas être directement combinées avec d'autres composants. Ils ne doivent pas être utilisés avec d'autres classes sur le même élément. Au lieu de cela, ajoutez un <span> Imbriqué et appliquez les classes d'icônes au <span>.

Uniquement pour une utilisation sur des éléments vides Les classes d'icônes ne doivent être utilisées que sur des éléments qui ne contiennent pas de contenu texte et n'ont pas d'éléments enfants.

1
violet313

Utilisation de HAML:

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