如何为jQuery UI Dialog按钮添加Font Awesome图标？

方法一：动态插入图标元素（推荐，直观易维护） #

步骤1：引入图标库CSS #

确保页面头部引入Font Awesome或Bootstrap Icons的样式文件：

<!-- Font Awesome 6 示例 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Bootstrap Icons 示例 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

步骤2：初始化Dialog时添加图标 #

利用Dialog的create事件（按钮创建后触发），动态插入图标标签，避开HTML转义问题：

// ASP.NET服务器控件需用ClientID获取前端实际ID
$("#<%= myDialog.ClientID %>").dialog({
    autoOpen: false,
    buttons: [
        {
            text: "保存",
            click: function() {
                // 执行保存逻辑
                $(this).dialog("close");
            },
            id: "btnDialogSave" // 给按钮加ID，方便定位
        },
        {
            text: "取消",
            click: function() {
                $(this).dialog("close");
            },
            id: "btnDialogCancel"
        }
    ],
    create: function() {
        // 插入Font Awesome图标
        $("#btnDialogSave").prepend('<i class="fa fa-save"></i> ');
        $("#btnDialogCancel").prepend('<i class="fa fa-times"></i> ');
        
        // 若用Bootstrap Icons，替换class即可：
        // $("#btnDialogSave").prepend('<i class="bi bi-save"></i> ');
        // $("#btnDialogCancel").prepend('<i class="bi bi-x-lg"></i> ');
    }
});

步骤3：自定义hover状态颜色 #

添加独立CSS，不修改jQuery UI原生样式，仅针对按钮内的图标：

/* 默认图标样式 */
.ui-dialog-buttonpane .ui-button i {
    color: #333;
    margin-right: 6px; /* 图标与文字的间距 */
}

/* 鼠标hover时的图标颜色 */
.ui-dialog-buttonpane .ui-button:hover i {
    color: #0066cc; /* 替换为你需要的hover颜色 */
}

方法二：CSS伪元素实现（无DOM操作） #

如果不想修改DOM，可用CSS伪元素::before插入图标，需提前查好图标的Unicode值（可在图标库官网查询）：

步骤1：添加自定义按钮class与CSS #

/* Font Awesome 保存图标样式 */
.btn-dialog-save::before {
    font-family: "Font Awesome 6 Free"; /* 注意字体族，根据版本调整 */
    content: "\f0c7"; /* 保存图标的Unicode */
    font-weight: 900; /* 实心图标需设置此权重 */
    margin-right: 6px;
    color: #333;
}

.ui-dialog-buttonpane .ui-button.btn-dialog-save:hover::before {
    color: #0066cc;
}

/* Bootstrap Icons 保存图标样式 */
.btn-dialog-save-bs::before {
    font-family: "bootstrap-icons";
    content: "\f4c4"; /* Bootstrap保存图标的Unicode */
    margin-right: 6px;
    color: #333;
}

.ui-dialog-buttonpane .ui-button.btn-dialog-save-bs:hover::before {
    color: #0066cc;
}

步骤2：初始化Dialog时绑定class #

$("#<%= myDialog.ClientID %>").dialog({
    autoOpen: false,
    buttons: [
        {
            text: "保存",
            click: function() {
                $(this).dialog("close");
            },
            class: "btn-dialog-save" // 绑定自定义class
        }
    ]
});

注意事项 #

• 若使用ASP.NET UpdatePanel，异步回发后需重新初始化Dialog，可在EndRequest事件中处理：

  Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
      // 重新初始化Dialog或执行图标插入逻辑
      $("#<%= myDialog.ClientID %>").dialog("refresh");
  });
  

• 确保图标库CSS版本与使用的图标class匹配，避免样式失效。

内容的提问来源于stack exchange，提问作者Albert D. Kallal