Jquery 在-（FontAwesome+；引导）上更改鼠标上的图标大小

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

我正在使用Fontsomeous和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>

收件箱
印刷品
....

我想在mouse-over元素上添加“icon-2x”css类，以显示更大的图标，并在鼠标离开时删除该类

我希望它看起来像这些例子。像这样：

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

我试着用jQuery查找elemets来添加css类，但a做不到

有人能帮我吗

---

谢谢

为什么不直接使用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');
})

---

如果你想有一个动画开关，你需要使用javascript。但是你可以通过这样做来实现这一点

<ul>
    <li><a class="image" href ="#"></a> <p>Long story</p></li>
</ul>

---

您可以在这里看到小提琴

您需要将字体大小应用于：before伪元素

li:hover i:before {
    font-size: 24px /*or whatever*/
}

---

请参阅：

我建议使用CSS缩放（我将其用于我页面上与FontAwesome的链接）：

它不会移动图标旁边的元素（例如其他文本），因为字体大小会发生变化

更新

---

请参见我的主页页脚上的FontAwesome的使用示例：

您的课程是如何完成的（图标收件箱或图标打印）？你能展示一下css代码吗？太好了！，这两种方法都能正常工作。最后我将使用：悬停css。谢谢

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