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

【问题标题】：Change icon size on mouse over - (FontAwesome + Bootstrap)在鼠标悬停时更改图标大小 - (FontAwesome + Bootstrap)
【发布时间】：2016-07-06 13:15:13
【问题描述】：

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

我正在使用 FontAwesome 和引导程序。我有一个这样的列表：

<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 类，但无法做到。

谁能帮帮我？

谢谢

【问题讨论】：

你的课做得怎么样（图标收件箱或图标打印）？你能显示css代码吗？

标签： jquery html css twitter-bootstrap font-awesome

【解决方案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');
})

【讨论】：

太棒了！两种方式都能正常工作。最后我将使用 :hover css。谢谢。

【解决方案2】：

我建议使用 CSS 比例（我在我的页面上使用 FontAwesome 链接）：

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

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

更新

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

【讨论】：

【解决方案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

【讨论】：

【解决方案4】：

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

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

见：http://astronautweb.co/snippet/font-awesome/

【讨论】：