Alter icon size on hover w/o affecting other icons

Question

I am altering my font awesome icons on hover to make them bigger. The problem I am running into is that by making 1 icon bigger it moves the other icons next to it around. I.E. the icons get moved over and down. I have created this base fiddle to show the problem. I have messed with padding and margin to try and create space needed around each icon such that the space is big enough that the other icons don't move. I am a CSS rookie for sure so please go easy ;) Here is the fiddle: http://jsfiddle.net/newmanw/MUHVD/ markup: ``` Bootstrap 101 Template

``` css ``` @import url('https://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css'); .icon:hover{ cursor: pointer; font-size: 28px; } ```

Accepted Answer

Does this work out for you?

```
.icon:hover{
    cursor: pointer;
    font-size: 28px;
 }
 .icon{
   float:left;
   width:30px;   
  text-align:center;
}
```

http://jsfiddle.net/MUHVD/1/

Alter icon size on hover w/o affecting other icons

Solution

Problem