鼠标悬停时更改图标大小 - (FontAwesome + Bootstrap)

Question

我想在鼠标悬停元素上显示2x图标大小.

我正在使用FontAwesome和bootstrap.我有一个像这样的列表:

<ul>
    <li><a href ="#"><i class="icon-inbox"></i> Inbox<a/></li>
    <li><a href ="#"><i class="icon-print"></i> print<a/></li>
    ....
</ul>

我想在鼠标悬停元素上添加"icon-2x"fontawesome css类,以显示更大的图标,并在鼠标离开时删除该类.

我希望它看起来像FontAwesome主页示例.像这样:

我尝试使用jQuery添加元素来添加css类,但是无法做到.

谁能帮我？

谢谢

Answer 1

你为什么不用CSS :hover？

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

FontAwesome使用字体作为图标,因此要将图标大小加倍,只需将字体大小加倍.当然,您还需要满足填充,边距和其他任何内容,以确保图标保持相对于旁边的文本.

如果您仍想使用jQuery添加新类:

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

Answer 2

我建议使用CSS scale(我用它来链接我的页面上的FontAwesome):

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

它不会移动图标旁边的元素(例如其他文本)更改字体大小的原因.

UPDATE

在我的主页的页脚上查看示例如何与FontAwesome一起使用:http://pnowy.github.io/about/