鼠标悬停时更改图标大小 - （Font Awesome + 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比例（我用它来将我的页面上的链接用于FontAwesome）：

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

它不会移动图标旁边的元素（例如其他文本）改变字体大小的原因。

<强>更新

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

Answer 3

如果您想要动画切换，则需要使用javascript。但是你可以通过这样做来实现这个目标

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

然后像这样设计它

.image{
    float:left;
    display:block;
    background:url('http://icons.iconarchive.com/icons/deleket/sleek-xp-software/256/Yahoo-Messenger-icon.png');
    width:50px;
    height:50px;
    background-size:50px 50px;
}
li p{
    line-height:50px;
    vertical-align:center;
}
li:hover p{
    line-height:70px;
}
li:hover .image{
    width:70px;
    height:70px;
    background-size:70px 70px;
}

你可以在这里看到一个小提琴jsFiddle

Answer 4

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

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

请参阅：http://astronautweb.co/snippet/font-awesome/