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

Question

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

Answer 1

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');
})

Answer 2

I would suggest to use CSS scale (I'm using it for links on my page with FontAwesome):

a:hover i { transform: scale(2); }

It won't move the elements which are next to the icon (for example the other text) what change font size cause.

UPDATE

See the example how it works with FontAwesome on the footer of my home page: http://pnowy.github.io/about/