用图像图标替换编辑和删除 html 按钮

Posted 2023-05-09

【中文标题】用图像图标替换编辑和删除 html 按钮

【英文标题】：Replace edit and delete html buttons with image icon

【发布时间】：2016-06-11 22:05:04

【问题描述】：

在下面的 jsfiddle 中，一切正常。但是，我正在尝试用 edit.ico 和 delete.ico 替换编辑和删除。这两个图标文件将位于同一目录中。我尝试了很多方法，我迷失了方向。对 jQuery 和 javascript 来说非常新，但我已经拼凑了一个基于这个 jsfiddle 使用的应用程序。

Please see:http://jsfiddle.net/asifrc/EfRWZ/2/

如果有人能提供任何帮助，我将不胜感激。

【问题讨论】：

请显示相关代码本身以及预期结果。我在演示中没有看到任何与图标相关的内容。

【参考方案1】：

有多种方法可以用图标替换按钮。这是您的 JSFiddle 的一个分支，带有编辑和删除图标。

http://jsfiddle.net/colinwhitmarsh/2nt3vc2r/1/

在 html 的顶部，您可以看到有一个 <link/> 标记来加载 Google 的 Material Icons https://design.google.com/icons/。这些都是免费且易于使用的。如果您不熟悉图标并想尝试一下，我推荐它们。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
rel="stylesheet">

为了包含图标，我将<button> 标签更改为<i>，添加class="material-icons"，并将文本更改为图标的名称。查看 design.google.com/icons 以查找您要使用的其他图标的名称。

已更改

<button onclick='deleteRow(" + rowID + ")'>Delete</button>

收件人

<i class='material-icons' onclick='deleteRow(" + rowID + ")'>delete</i>

希望这会有所帮助！

【讨论】：

非常感谢您向我介绍 Google Material Icons 的魔力。那太棒了。减少编码后顾之忧，无需编辑图形以适合您的配色方案。太棒了...再次感谢！