title: How to get a hover effect for glyphicon icons?
body: <p>I'm trying to make glyphicon icon appear every time I hover my mouse over it. And I'm using <code>&lt;span&gt;</code> tag for it. But this refuses to work. What have I done wrong?</p>
  
  <p><strong>application.scss</strong></p>
  
  <pre><code> /*
   *= require bootstrap3-editable/bootstrap-editable
   *= require bootstrap-datepicker3
   *= require_tree .
   */
  
    @import "bootstrap-sprockets";
    @import "bootstrap";
  
  .hovering:before {
  display: none;
  }
  
  .hovering:hover:before {
  display: block;
  }
  </code></pre>
  
  <p>In my <strong>view</strong> file it looks like this:</p>
  
  <pre><code>  &lt;span class='hovering'&gt;
      &lt;%= link_to user_task_path(current_user, task.id), method: :delete,
      data: { confirm: 'Are you sure?' }, remote: true do %&gt;
        &lt;i class="glyphicon glyphicon-trash"&gt;&lt;/i&gt;
      &lt;% end %&gt;
    &lt;/span&gt;
  </code></pre>