Change icon size on mouse over - (FontAwesome + Bootstrap)

css, font-awesome, html, jquery, twitter-bootstrap

Solution

Why don't you just use CSS `:hover`?

li i[class^="icon-"] { font-size:12px; }
li:hover i[class^="icon-"] { font-size:24px; }

FontAwesome uses a font for the icons, so to double the icon size you simply double the font size. Of course you'd also need to cater for padding, margins and whatever else to ensure the icon stays relative to the text beside it.

If you still want to use jQuery to add a new class:

$('li').hover(function() {
    $('i[class^="icon-"]', this).addClass('icon-2x');
}, function() {
    $('i[class^="icon-"]', this).removeClass('icon-2x');
})

Problem

I want to display a 2x icon size on mouse over element. I'm using FontAwesome with bootstrap. I have a List like this: ``` <ul> <li><a href ="#"><i class="icon-inbox"></i> Inbox<a/></li> <li><a href ="#"><i class="icon-print"></i> print<a/></li> .... </ul> ``` I want to add "icon-2x" fontawesome css class, on mouse over element, to display a larger icon, and remove that class on mouse leave. I want it to look like the FontAwesome homepage examples. like this: I tried finding elemets with jQuery to add the css class, but a couldn't do it. Can anyone help me? Thanks

Original source