我已经尝试了这三种方法，它们似乎都给了我相同的结果。
我试图进行研究以找出它们之间的不同性能，但到目前为止没有发现任何问题。
<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>
我想知道哪种方法是最有效的方法，为什么？
最佳答案
从性能的角度来看，子画面图像集或字体图标比对图标使用单个图像更为可取。但是，如果您使用了大量自定义字体，则使用过多的自定义字体可能会造成一些性能问题，并且子画面图像集并不总是很容易适用于每种情况或设计。
如果使用字体图标，请使用诸如Fontello之类的内容来编译仅包含所需内容的自定义字体图标库，以使字体库的大小最小。
如果使用Sprite图像集，请使用Dan's Tools Sprite Generator之类的工具以不同的对齐方式和不同的间距渲染Sprite图像，以使其适合您的项目。
不要为每个图标使用单个图像。
关于html - CSS与字体图标用小图标表示的图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29213568/