Question

我正在尝试使用我在rails应用程序中设置样式的字形图标。

我想让图标成为另一个页面的链接，但不能使用标准的引导样式，因为我已经为我的页面风格定制了链接。

我一直收到关键字类错误 - 有人知道为什么吗？

谢谢。

我的观点中有以下链接：

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

我也有css如下：

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

你必须使用＆＃34;在字符串周围，还需要调用html_safe方法。

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

但是更好更清洁的方式是

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

Answer 2

您的问题是您在glyphicon css上使用a:visited {text-decoration:none; background-color:transparent; color:grey;};但它们应该在您的链接上

试试这个：

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

然后设置你的链接样式，如果你使用的是scss：

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

Rails link_to带有样式glyphicon的标记标记

2 个答案: