Rails link_to tag tag với glyphicon theo kiểu

Question

Tôi đang cố gắng sử dụng các biểu tượng glyph mà tôi đã tạo kiểu trong ứng dụng đường ray của mình.

Tôi muốn biến biểu tượng thành liên kết đến một trang khác, nhưng không thể sử dụng kiểu khởi động chuẩn vì tôi đã tùy chỉnh các liên kết cho kiểu trang của tôi.

Tôi tiếp tục gặp lỗi lớp từ khóa - có ai biết tại sao không?

Cảm ơn bạn.

tôi có đường dẫn sau trong quan điểm của tôi:

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

Tôi cũng có css như sau:

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;}; 
} 

Answer 1

Bạn phải sử dụng "xung quanh chuỗi, cũng cần phải gọi html_safe phương pháp trên

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

nhưng cách tốt hơn và sạch hơn sẽ là

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

Answer 2

Vấn đề của bạn là bạn đang sử dụng a:visited {text-decoration:none; background-color:transparent; color:grey;}; trên glyphicon css của bạn nhưng họ nên được trên liên kết của bạn

Hãy thử điều này:

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

và sau đó phong cách liên kết của bạn, nếu bạn là sử dụng scss sau đó:

.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; 
    } 
}