HTML + CSS一个不同大小的图标精灵的位置类

Question

尝试制作带有图标的菜单，以便在悬停时更改颜色。重点是：在每个菜单图标上使用inline-css来更改精灵文件，例如：<a href="#" style="background-image: url(menuSprites/smartphone.png);" class="">Contact</a>和CSS中只有一个类：

.menuPicHeader a{   
        background-repeat: no-repeat;
        display: inline-block;
        height: 50px;
        background-position: X X;
    }

    .menuPicHeader a:hover{
            background-position: X -X;
    }

问题 - 每个图标对（每个精灵2个图标，1个正常1个悬停）的大小不同。因此，如果我预先设置一些背景位置偏移，由于尺寸不同，它显然不起作用。是否有一些工具/简单的方法来制作可以使用相同偏移的精灵？这就是我以前测试它，使用一个使用50像素间隙的发生器制作它：

（电话和球 - 不同大小）

文件1：

File2：

P.S。我使用的生成器：http://www.cssportal.com/css-sprite-generator/

Answer 1

为每个图像制作相同尺寸的图像（更好）或为个人设置特殊属性。