title: Show bootstrap glyphicon in link when hovering
body: <p>I'm trying to show a bootstrap glyphicon on the rigth side on my link when I am hovering it. </p>
  
  <p>I've tried using both CSS an JS but it just wont work. So i need som help :)</p>
  
  <p>This is what I am trying to do: <a href="http://i.imgur.com/b3rAsOO.png" rel="noreferrer">When i hoover Foo</a>, <a href="http://i.imgur.com/P4ATVOC.png" rel="noreferrer">I want the pencil icon to show</a>. And so on. The same is going to happen when i hoover 'Bar' and 'This is a link' also</p>
  
  <p>I also want it to be a button. </p>
  
  <p>This is how the html looks like:</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="nesting"&gt;
    &lt;a href="#" class="nesting-item"&gt;&lt;span class="glyphicon glyphicon-folder-open" area-hidden="true"&gt;&lt;/span&gt; Foo &lt;div class="pull-right"&gt;&lt;span class="glyphicon glyphicon-pencil" area-hidden="true"&gt;&lt;/div&gt;&lt;/a&gt;
    &lt;div class="nesting_child"&gt;
      &lt;a href="#" class="nesting-item"&gt;&lt;span class="glyphicon glyphicon-chevron-right" area-hidden="true"&gt;&lt;/span&gt; Bar&lt;/a&gt;
      &lt;a href="#" class="nesting-item"&gt;&lt;span class="glyphicon glyphicon-globe" area-hidden="true"&gt;&lt;/span&gt; This is a link&lt;/a&gt;
  </code></pre>
  
  <p>Thank you for your help :)</p>