HTML 和 CSS : Difference between glyphicon and image

Question

我正在实现一个按钮来刷新我的 HTML 页面上的值，并且我在按钮内放置了一个刷新图标。通过这样做，我发现我可以使用字形图标:

<button id="button_reload" onclick=reload()><span class="glyphicon glyphicon-refresh"></span></button>

或使用图像:

CSS:

.buttn{
background:transparent url(/reload.png) no-repeat left; }

HTML:

<button id="button_reload" onclick=reload() class="buttn"></button>

两者之间的最大区别是什么，因为它们都在工作？

Answer 1

在您的情况下，主要区别在于您将自定义图像设置为按钮 的背景。

在 glyphicon 的情况下，它不是 background，而是 button 内的 image。

接下来的内容将具有可应用于它们的不同属性集，并且将以不同的方式运行。 Glyphicon 将表现为 图像，而您的案例将表现为 背景。

例如，在您的情况下，您可以使用以下属性:background-repeat、background-size、background-position，您可以t 用于字形图标，反之亦然。