How to change Icon Font size on hover while keeping position of remaining icons?

Question

I have a line with icon fonts (Font Awesome). On hover I want the font size increased (bigger icon) while keeping the icon centered within the line (both horizontal and vertical) and the remaining icons should retain their size and position.

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/

I can't find the proper settings for margin etc. Help!

Answer 1

Try scaling it instead:

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

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

Answer 2

Here is my solution:

.class2 {
    display: inline-block;
    width: 1em;
    vertical-align: middle;
    text-align: center;
    margin: 0 0.1em;
}

And update this:

.class2:hover {
    /* your styles */
    margin: 0;
}

Here is a fiddle: http://jsfiddle.net/ty4tu89b/

First we make them display as inline-block, thus we can give them fixed width. Than we align them vertically in the middle and center them horizontally. Because when hovering the font size increases for 0.2em we add margin to the left and right each 0.1em.

When hovering the margin should be 0. And voila! They stay as they lay.