CSS比字体图标。图像的小图标

Question

我已经尝试了这三种方法，它们似乎都给了我相同的结果。 我试图研究以找出它们之间的不同表现，到目前为止我没有遇到过任何事情。

<div class="col-lg-3"><span class="success-icon"> </span>icon</div>

<div class="col-lg-3"><i class="icon-circle-blank success"></i></span>icon</div>

<div class="col-lg-3"><img src="img/success-icon.png"></span>icon</div>

我想知道哪种方式最有效，为什么？

Answer 1

从性能角度来看，精灵图像集或字体图标比使用单个图像作为图标更可取。尽管如此，使用太多自定义字体可能会产生一些性能问题，如果您使用它们很多，并且精灵图像集并不总是很容易适用于每种情况或设计。

如果使用字体图标，请使用类似Fontello的内容来编译自定义字体图标库，该图库仅包含您需要的内容，以便字体库的大小最小。

如果使用精灵图像集，请使用Dan's Tools Sprite Generator等工具渲染精灵图像，使其具有不同的对齐方式和不同的间距，以使其适用于您的项目。

不要为每个图标使用单张图片。