解决这个问题的方法如下：
1、先在html里添加一个img图片标签。
2、运行页面后，这是完整显示图片大小的。图片大概是400x260左右的大小。
3、要进入图片缩放，可以在css样式里设置图片的宽度和高度，但不要宽和高都设置了，比如这里都设置为100px。
4、设置后，看下页面可以看到图片现在变形了。
5、正确的方法应该是只设置其中一个，比如设置宽度为100px，高度设置为自动就行了。
6、这里设置后的效果，图片并没有变形。
7、同样，如果是限定高度的大小，就设置宽度为自动，图片同样不会变形，这样问题就解决了。
针对你的需求来看，用css3来操作我觉得不是很恰当。目前能够良好的支持CSS3的浏览器全都对SVG支持良好，使用SVG构建矢量图图标是比较合适的，即使你需要兼容IE6，使用raphael.js也可以办到，目前这个js已经整合到最新的ext4.0.7.js中。
通常的html元素都不是矢量图，缩放可能带来问题，这个HTML元素都无法控制，CSS更是鞭长莫及了
建议题主学习一下 CSS 选择器优先级的问题。这里明显是因为有一个优先级更高的 .iconfont，它的 font-size 才是最后起决定作用的。
如果最简单粗暴的话，可以加 !important。
