ASP.NET GridView中Font-Awesome删除图标无法显示的解决方法
2026-5-28
解决ASP.NET GridView中Font Awesome删除图标不显示的问题
先梳理下你现有代码里的几个关键问题：
- 按钮的CSS类拼写错误：
fa fa-trash-0应该是fa fa-trash（旧版本可用fa fa-trash-o） - 你的
<button>标签是空的，Font Awesome图标需要通过正确的类名+标签结构渲染，空按钮自然看不到内容 - 用ASP.NET自带的
<asp:LinkButton>比普通HTML按钮更适配GridView的命令事件，能避免不必要的提交冲突
下面是完整的修正方案：
1. 确保Font Awesome已正确引入
首先在页面的<head>区域引入Font Awesome样式文件，推荐用CDN方式（也可以用本地文件）：
<!-- Font Awesome 4.x版本 --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- 如果用Font Awesome 5+版本，用这个 --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
2. 修正GridView的TemplateField代码
替换成适配的LinkButton，同时保留确认提示和删除命令：
<asp:TemplateField HeaderText="Delete?"> <ItemTemplate> <asp:LinkButton ID="lnkDelete" runat="server" CommandName="Delete" CssClass="fa fa-trash" <!-- 5+版本改成fas fa-trash --> Style="font-size:24px; cursor:pointer; color:#dc3545;" OnClientClick="return confirm('Are you sure to delete?');"> </asp:LinkButton> </ItemTemplate> </asp:TemplateField>
代码说明：
CommandName="Delete"：告诉GridView这是删除操作，会触发OnRowDeleting服务器事件CssClass：对应Font Awesome的图标类，5+版本需区分solid（fas）和regular（far）样式Style：自定义图标大小、鼠标样式和颜色（这里用了Bootstrap的危险色，可选）OnClientClick：点击时弹出确认提示，用户点击取消则终止后续的服务器端操作
3. 配置GridView的删除事件
确保GridView绑定了OnRowDeleting事件，示例如下：
<asp:GridView ID="GridView1" runat="server" DataKeyNames="YourPrimaryKeyColumn" <!-- 必须设置主键列 --> OnRowDeleting="GridView1_RowDeleting" ...其他属性...>
然后在后台代码（.cs文件）中实现删除逻辑：
protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e) { // 获取要删除记录的主键值 int recordId = Convert.ToInt32(GridView1.DataKeys[e.RowIndex].Value); // 执行你的删除逻辑，比如调用数据库操作 // Example: YourDatabaseHelper.DeleteRecord(recordId); // 重新绑定GridView刷新数据 BindGridViewData(); } // 封装的GridView绑定方法（示例） private void BindGridViewData() { // 从数据源获取数据并绑定 // GridView1.DataSource = YourDataSource; // GridView1.DataBind(); }
常见排查点
- 如果图标还是不显示，打开浏览器开发者工具（F12），检查Network标签里Font Awesome样式文件是否加载成功
- 确认没有自定义CSS覆盖了Font Awesome的样式（比如设置了
display:none或字体被替换） - 若使用Font Awesome 5+，务必用新的类名格式（
fas/far前缀），旧的fa前缀仅兼容部分版本
内容的提问来源于stack exchange，提问作者Our Man in Bananas
