Hoe voeg je glyphicons toe aan rails link_to helper – Bootstrap 3

Ik heb overal gezocht naar een goede uitleg over het toevoegen van glyphicons aan rails link_toen button_tohelpers, maar ik heb heel weinig gevonden. Wat ik tot nu toe heb verzameld, heeft me hiertoe geleid:

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

Dit werkt echter niet en ik denk dat het enige voorbeeld dat ik vond van Bootstrap 2 was. Kan iemand mij verwijzen naar een goede bron hierover, of een snel voorbeeld geven? Bij voorbaat dank!

Antwoord 1, autoriteit 100%

Ik vond het antwoord hierop hier

De basisvorm van een glyph-link in rails ziet er als volgt uit:

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

Wijzig indien nodig. Het tweede voorbeeld in die link werkte niet voor mij, neem ik aan omdat ik de rails_bootstrap_sass-edelsteen gebruik? Hoe dan ook, het bovenstaande formulier werkte voor mij.

Antwoord 2, autoriteit 26%

Als je op zoek bent naar een inline methode, dit werkt voor mij:

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

De <i></i>kan aan beide kanten van het 'Dashboard'gaan. Ik heb dit specifieke voorbeeld alleen getest in Rails 4 met Bootstrap 3 maar dit was de methode die ik eerder gebruikte in Rails 3 en Bootstrap 2

Ik hoop dat dit iemand in de toekomst helpt

Bewerken: komma verwijderd om het glyphicon correct weer te geven.

Antwoord 3, autoriteit 17%

In mijn ervaring is het antwoord van @settheline bijna ideaal, maar op mijn website verandert het het lettertype ten opzichte van andere knoppen zonder pictogrammen. Dus uiteindelijk deed ik zoiets als dit:

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

En dit lijkt het lettertype gelijk te houden aan andere knoppen zonder pictogrammen.

Antwoord 4, autoriteit 3%

Slim gebruiken, hier is link_to:

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

en button_to:

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

Het is mogelijk om meer tekst/etc. toe te voegen. ook naar de knop, maar nest hem niet onder de glyphicon’s spanwijdte.

Antwoord 5, autoriteit 2%

HAML gebruiken:

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

Antwoord 6

Je kunt hiervoor het font-awesome-railsjuweeltje gebruiken en dan het volgende doen:

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

Antwoord 7

&Voor degenen die onnodige herhaling van het langdradige gedoe willen vermijden..

ik stop zoiets in mijn 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

Voorbeeld .erbgebruik:

<%= 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" %>

Ik gebruik dit in Rails4maar ik denk dat het ook zou kunnen werken in Rails3

Oooo! ik heb toevallig ook dit advies opgemerkt van de bootstrap (momenteel v3.3.5) docos:

Niet mengen met andere componentenIcoonklassen kunnen niet direct worden gecombineerd met andere componenten. Ze mogen niet samen met
andere klassen op hetzelfde element. Voeg in plaats daarvan een geneste <span>en
pas de pictogramklassen toe op de <span>.

Alleen voor gebruik op lege elementenPictogramklassen mogen alleen worden gebruikt op elementen die geen tekstinhoud bevatten en geen onderliggende elementen hebben.

Antwoord 8

Er is een snellere en gemakkelijkere manier om (fontawasome) pictogrammen toe te passen zonder extra edelsteeninstallaties.

Je kunt dit patroon volgen:

         <%= link_to root_path, class: "nav-link" do %>
            <i class="fas fa-pencil-alt"></i>
          <% end %>

Natuurlijk moet je eerst een GRATIS kit-account maken op de FONTAWASOME en deze moet in het hoofdvan je application.html.erbzijn ingesteld om de pictogrammen te kunnen gebruiken .
Volg de instructies die hier worden gegeven om een account aan te maken in Fontawasome(als je er nog geen hebt).

Als je een voorbeeld nodig hebt, kun je mijn opslagplaats bekijken in GitHub