目前能够良好的支持CSS3的浏览器全都对SVG支持良好，使用SVG构建矢量图图标是比较合适的，即使你需要兼容IE6，使用raphael.js也可以办到，目前这个js已经整合到最新的ext4.0.7.js中。
通常的html元素都不是矢量图，缩放可能带来问题，这个HTML元素都无法控制，CSS更是鞭长莫及了
例：用CSS3对图片放大效果
.right_div .topicons li a:hover img{
-webkit-transform:scale(1.5,1.5)
-moz-transform:scale(1.5,1.5)
-transform:scale(1.5,1.5)
}
<div class="right_div">
<ul class="topicons">
<li><div class="img1"><a href="#"><img src="images/product_miniimg_01.png" /></div><p>企业统一门户</p></a></li>
</ul>
</div>
希望我的回答可以帮到您哦
建议题主学习一下 CSS 选择器优先级的问题。这里明显是因为有一个优先级更高的 .iconfont，它的 font-size 才是最后起决定作用的。
如果最简单粗暴的话，可以加 !important。
