Hover with icon and text

[msfarrel]

Is there a better solution to handle hover on a link with both an image and text, for example:

<a href=""><i class="ico-map"></i> Map</a>

This solution works but it adds a ton of unnecessary css:

.ico-map {@include retina-sprite(map);}
a:hover .ico-map {@include retina-sprite(map_hover);}

[AdamBrodzinski]

Thanks for opening up this issue. Can you paste the css that it outputs?
I'll try to look into this further over the weekend.

[msfarrel]

It just repeats everything twice, when ideally you just want to change the background position. Either way love this mixin!

.ico-map {
  height: 20px;
  width: 20px;
  background-image: url('/images/icons-sb2c733adb8.png');
  background-position: 0 -412px;
  background-repeat: no-repeat;
  vertical-align: top;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
  .ico-map {
    background-image: url('/images/icons2x-s8ffb66b8ca.png');
    background-position: 0 -456px;
    -webkit-background-size: 316px auto;
    -moz-background-size: 316px auto;
    -o-background-size: 316px auto;
    background-size: 316px auto;
  }
}

a:hover .ico-map {
  height: 20px;
  width: 20px;
  background-image: url('/images/icons-sb2c733adb8.png');
  background-position: 0 -354px;
  background-repeat: no-repeat;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
  a:hover .ico-map {
    background-image: url('/images/icons2x-s8ffb66b8ca.png');
    background-position: 0 -476px;
    -webkit-background-size: 316px auto;
    -moz-background-size: 316px auto;
    -o-background-size: 316px auto;
    background-size: 316px auto;
  }
}