2014-06-27 10 views
5

Ich versuche Glyph Icons zu verwenden, die ich in meiner Rails App gestylt habe.Rails link_to Tag-Tag mit gestylten Glyphon

Ich möchte das Symbol einen Link zu einer anderen Seite machen, kann aber nicht den Standard-Bootstrap-Stil verwenden, weil ich die Links für den Stil meiner Seite angepasst habe.

Ich bekomme immer einen Keyword-Klassenfehler - weiß jemand warum?

Vielen Dank.

Ich habe den folgenden Link in meiner Ansicht:

<li><%= link_to <span class="glyphicon glyphicon-comment"></span>, page_path('messages') %> </li> 

ich auch CSS haben wie folgt:

span.glyphicon-comment { 
    vertical-align:middle; 
    margin:auto; 
    padding:10px; 
    font-size: 2em; 
    text-align: right; 
    a:link {text-decoration:none; background-color:transparent; color:grey;}; 
    a:visited {text-decoration:none;background-color:transparent; color:grey;}; 
    a:hover {text-decoration:none;background-color:transparent; color:dark grey;}; 
    a:active {text-decoration:none;background-color:transparent; color:grey;}; 
} 
+0

Können Sie Ihre anpassen Stil von Links? Ich denke Lösung von Iceman ist sehr klar. http://jsfiddle.net/EX8th/ –

+0

Hallo - das CSS, das ich benutze, ist oben (span.glyphicon-comment. – Mel

+0

das ist implicate nicht für Link-Tag, aber für Span-Tag. So, jetzt ist dein Problem 'erhalten a syntax error: syntax error, unerwartete keyword_ensure, expectation keyword_end.', nicht wahr? kannst du startrace posten, wenn du auf diesen Link klickst? –

Antwort

12

Sie "um die Zeichenfolge verwenden müssen, müssen auch auf Methode aufrufen html_safe es.

<%= link_to "<span class=\"glyphicon glyphicon-comment\"></span>".html_safe, page_path('messages') %> 

aber ein besserer und sauberere Weg wäre

+1

Hi Iceman, danke für die Hilfe, wenn ich den ersten deiner Vorschläge hinzufüge, tut es nicht ' t hole mein css styling auf. Wenn ich das zweite benutze, bekomme ich einen syntaktischen Fehler: syntax error, expected keyword_ensure, expectation keyword_end. Ich füge Ende an das Ende des hinzu, bekomme aber den gleichen Fehler. Gibt es eine andere Möglichkeit, dies zu setzen Vielen Dank – Mel

+0

@ user2860931 Versuchen Sie die aktualisierte Antwort, es fehlte ein 'Ende' – Iceman

+0

Danke Iceman, ich versuchte es so und es gibt diesen Fehler zurück: Syntaxfehler, unerwartete keyword_class, erwartet Keyword_do oder '{' oder '(' Nicht su Was ist mit diesem Ausdruck falsch? – Mel

1

Ihr Problem ist, dass Sie a:visited {text-decoration:none; background-color:transparent; color:grey;}; auf Ihrem glyphicon CSS verwenden, aber sie auf Ihren Link

dieses versuchen sollte:

<%= link_to page_path('messages'), class: "comment_link" do %> 
    <span class="glyphicon glyphicon-comment"></span> 
<% end %> 

und dann Ihren Link Stil, wenn Sie mit scss dann:

.comment_link{ 
    .glyphicon-comment{ 
    vertical-align:middle; 
    margin:auto; 
    padding:10px; 
    font-size: 2em; 
    text-align: right; 
    } 
    &:hover, &:visited, &:active{ 
    text-decoration:none; 
    background-color:transparent; 
    color:dark grey; 
    } 
} 
+0

Hallo Mandeep Danke für den Vorschlag. Ich habe es versucht, aber bekomme den folgenden Syntaxfehler: Syntaxfehler, unerwartete Keyword_Class, erwartet Keyword_do oder '{' oder '(' – Mel

+0

@ user2860931 können Sie kopieren und fügen Sie Ihren genauen Link wie es in Ihrer Anwendung ist – Mandeep