Rails link_to tag tag with styled glyphicon

Question

I am trying to use glyph icons that I have styled in my rails app.

I want to make the icon a link to another page, but can't use the standard bootstrap styling because I have customised the links for my page's style.

I keep getting a keyword class error - does anyone know why?

Thank you.

I have the following link in my view:

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

I also have css as follows:

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

You have to use " around the string, also need to call html_safe method on it.

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

but a better and cleaner way would be

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

Answer 2

Your problem is that you are using a:visited {text-decoration:none; background-color:transparent; color:grey;}; on your glyphicon css but they should be on your link

Try this:

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

and then style your link, if you are using scss then:

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