将glyphicon添加到rails link_to helper并在悬停时禁用效果

Question

I'm trying to style my link_to helper. I want to add an icon instead of a link and disable all the effects. I followed this method Remove underline from link within hyperlinked div but it did not work for me, whenever I hover over the icon it disappears which is not what I want. Here's what I have so far.

<div id = "owner-icons">
<%= link_to  product, method: :delete, data: { confirm: 'Are you sure?' }  do %>    
<span class="glyphicon glyphicon-trash"></span> 
</div>
<% end %>

bootstrap.css

div.owner-icons a {text-decoration:none;}

Is possible to change the color of the icon as well ?

Answer 1

You simpy add glyphicon to you link like this:

View (help me change your_url )

<div id="owner-icons">
  <%= link_to  '', your_url, method: :delete, data: { confirm: 'Are you sure?' }, class: 'glyphicon glyphicon-trash' %>
</div>

Style

#owner-icons a {
  color: red; # your custom color
  text-decoration: none;
}

Btw, in your current code has some problems:

• owner-icons is id not class , so your css will not work
• </div> closing tag isn't in the right place I think

Update

Add hover style to link:

• In case you are using scss

   #owner-icons a { color: red; # your custom color text-decoration: none; &:hover { background: transparent; # Your custom background } } 

• Or a plain css

   #owner-icons a { color: red; # your custom color text-decoration: none; } #owner-icons a:hover { background: transparent; # Your custom background }