jQuery Datepicker日历图标显示异常：CSS文本替代Font Awesome图标求助

之前运行正常的网站预订日历突然异常：原本应显示的Font Awesome fa-calendar-o 图标，变成了<i class="fa fa-calendar-o" aria-hidden="true"></i>这段代码文本。推测过是资源过期，但删除代码中图标相关行后问题仍未解决。

涉及代码如下：

jQuery(function () {

    // Datepicker
    
    jQuery("#w_txtArrivalDate").datepicker({
    
        dateFormat : 'M d, yy',
    
        minDate    : new Date(),
    
        buttonText : '<i class="fa fa-calendar-o" aria-hidden="true"></i>',
    
        changeMonth: true,
    
        changeYear : true,
    
        showOn     : "button",
    
    });
    
    
    
    jQuery("#w_txtDepartureDate").datepicker({
    
        dateFormat : 'M d, yy',
    
        minDate    : '+1d',
    
        maxDate    : '+180d',
    
        buttonText : '<i class="fa fa-calendar-o" aria-hidden="true"></i>',
    
        changeMonth: true,
    
        changeYear : true,
    
        showOn     : "button",
    
    });
    
    
    
    ResetDates();

});

可能原因 #

1. HTML实体解析失效：代码中buttonText使用了转义后的HTML实体（<、"），正常情况下jQuery UI Datepicker会解析这些实体并渲染为HTML元素，但版本更新或配置变更可能导致解析逻辑失效，直接输出文本。
2. jQuery UI兼容性变更：若升级了jQuery或jQuery UI版本，新版本的buttonText参数可能不再支持HTML内容，仅接受纯文本，导致标签被当作普通字符输出。
3. Font Awesome资源异常：虽然当前表现是代码文本直接显示，但如果Font Awesome资源加载失败（CDN过期、文件丢失），也可能间接引发显示异常，需优先排除。

解决建议 #

• 更换buttonText为原生HTML标签：尝试把转义后的实体改为原生HTML（注意引号转义），修改buttonText的值：

  buttonText: '<i class="fa fa-calendar-o" aria-hidden="true"></i>'
  

• 用回调手动修改按钮内容：如果buttonText不支持HTML，可借助beforeShow回调手动替换按钮元素：

  jQuery("#w_txtArrivalDate").datepicker({
      // 保留原有配置
      showOn: "button",
      beforeShow: function(input, inst) {
          inst.dpDiv.prev().find('.ui-datepicker-trigger').html('<i class="fa fa-calendar-o" aria-hidden="true"></i>');
      }
  });
  

• 改用图标图片替代HTML标签：直接指定图标图片路径，使用buttonImage和buttonImageOnly参数：

  jQuery("#w_txtArrivalDate").datepicker({
      // 保留原有配置
      buttonImage: '你的日历图标路径.png',
      buttonImageOnly: true,
      showOn: "button"
  });
  

• 检查依赖版本与资源加载：
  1. 确认jQuery、jQuery UI版本是否匹配，有无自动更新导致的兼容性问题；
  2. 打开浏览器开发者工具（F12），在Network标签下检查Font Awesome的CSS文件是否成功加载，若加载失败，替换为稳定CDN链接，比如：

     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     

内容的提问来源于stack exchange，提问作者Kat