Switch icon on mouse hover - css

Question

I'm displaying one of the Twitter Bootstrap provided icons in an anchor. I want the default icon to be switched to icon-white when i have the mouse over the anchor.
The effect should be like when you hover over the anchors in the navbar here
How is this done?

Answer 1

You use the CSS pseudo-class :hover to set a different background:
.menulink:hover { background-image: url('alternative_sprite.png'); }

Answer 2

Use jQuery toggleClass() on hover to change the icon to white.
See this jsfiddle.
HTML:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<a href="#"><div class="btn btn-primary">
<i class="glyphicon glyphicon-print"></i> Click</div></a>
<br/>
Script:
$("document").ready(function(){
$("a").hover(function(){
$('i').toggleClass('glyphicon-envelope glyphicon-print');
});
});​

Answer 3

just switch over the glyphicons image?
(extracted from my css, which is a sass version, and my images are in a different place, but you get the idea...)
&:hover{
i{
background-image: url("../images/bootstrap/glyphicons-halflings-white.png");
}

Answer 4

Actually, the AngularJS website uses a webfont to display icons:
font-family: 'FontAwesome';
And they insert the font-icon using CSS pseudo-class :before:
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: FontAwesome;
}
Which it is a brilliant solution, if you resolve to create your own icon web font.
Or even better, you can use Font-Awesome.

Answer 5

Use CSS psuedo-class :hover..
.menulink:hover { background-image: url('myimage.png'); }

Answer 6

Some of the answer above are not working and give a background image with all glyphicons at ones.
This works form me. Notice that I have changed the color of the icons to fits my needs.
a:hover > [class^="icon-"] {
background-image: url("bootstrap/img/glyphicons-halflings-orange-dark.png") !important;
}

Answer 7

I know there are already a few quick solutions posted that will do the trick. I would like to add my solution if you would like to achieve this without using JQuery or CSS:
Crate an $scope object that contains the name of the icon class your would like to set by default.
$scope.myClass = "glyphicon glyphicon-ok"
Add ng-class directive and get the class name from $scope.MyClass, add ng-mouseover and ng-mouseleave directives and change $scope.MyClass value
<span
ng-class="myClass"
ng-mouseover="myClass = 'glyphicon glyphicon-remove'"
ng-mouseleave="myClass = 'glyphicon glyphicon-ok'">
</span>