如何在保持剩余图标位置的同时在悬停时更改图标字体大小？

Question

我有一行带有图标字体（Font Awesome）。在悬停时，我希望字体大小增加（更大的图标），同时将图标保持在线（水平和垂直）内居中，其余图标应保持其大小和位置。

HTML：

<div id="container" class="class1">
<span class="fa fa-square-o class2"></span>
<span class="fa fa-square-o class2"></span>
<span class="fa fa-square-o class2"></span>
<span class="fa fa-square-o class2"></span>
</div>

CSS：

.class1 {
    font-size:2em;
    line-height:2em;
}
.class2:hover {
    font-size:1.2em;
}

JSFiddle：http : //jsfiddle.net/8LLtg5sf/2/

我找不到保证金等的正确设置。帮助！

Answer 1

尝试缩放它：

.class2:hover {
    transform:scale(1.3);
}

http://jsfiddle.net/8LLtg5sf/6/