Change color of glyphicon on button hover
<p>I have a button with an info <code>glyphicon</code> superimposed on it.</p>

<p>How can I make the color of the <code>glyphicon</code> change when I hover over the button (not the glyphicon)? I need to do this because the button also changes color upon hovering.</p>

<h2><strong>CSS</strong> and <strong>HTML</strong></h2>

<hr>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.glyphicon {
  position: absolute;
  right: 5px;
  top: 70px;
  color: #6B3E80;
  font-family: 'Glyphicons Halflings';
  font-weight: normal;
  font-size: 14px;
}

.btn {
    padding: 14px 24px;
    border: 4px solid #6B3E80;
    color: #6B3E80;
    font-family: Futura;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
}
 
.btn:focus, .btn:active:focus, .btn.active:focus {
    outline: 0 none;
}
 
.btn-primary {
    background: #ffffff;
    color: #6B3E80;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open &gt; .dropdown-toggle.btn-primary {
    background: gray;
    border: 4px solid gray;
    color: #ffffff;
}
 
.btn-primary:active, .btn-primary.active {
    background: gray;
    box-shadow: none;
}

.btn-primary:active:focus {
  color: #ffffff; 
  background-color: gray; 
  border-color: gray;
}

.btn.sharp {
  border-radius:0;
}

.btn-xlarge {
    padding: 18px 75px;
    font-size: 40px;
    line-height: normal;
    width: 275px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>      &lt;div class="row"&gt;
        &lt;div class="span12 pagination-centered"&gt;
          &lt;div class="btn-group"&gt;
            &lt;a href="who.html" class="btn btn-primary btn-xlarge"&gt;BUTTON1&lt;span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle= "tooltip" data-placement="bottom" title="tooltip1"&gt;&lt;/span&gt;&lt;/a&gt;
           &lt;/div&gt;
           &lt;div class="btn-group"&gt;
            &lt;a href="what.html" class="btn btn-primary btn-xlarge"&gt;BUTTON2&lt;span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-toggle="tooltip" data-placement="bottom" title="tooltip2"&gt;&lt;/span&gt;&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;</code></pre>
</div>
</div>
</p>