jQuery toggleClass切换Font Awesome图标时图标消失问题

你的类切换逻辑存在错误：

1. 初始图标元素的类为fa-solid fa-thumbs-up，其中fa-thumbs-up是指定图标形状的必要类，fa-solid/fa-regular是控制图标实心/描边样式的前缀类。
2. 你当前调用toggleClass("fa-regular fa-thumbs-up")时，会把传入的两个类同时做「存在则移除、不存在则添加」的操作：第一次点击时，元素上原有的fa-thumbs-up会被直接移除，同时新增fa-regular类，此时元素上只剩fa-solid fa-regular两个样式前缀类，没有指定要渲染的图标形状，图标自然会消失。

核心原则：切换点赞状态时，始终保留fa-thumbs-up这个图标形状类，仅在fa-solid（实心已赞）和fa-regular（描边未赞）两个前缀类之间切换即可。
修正后的交互代码如下：

// 绑定点赞按钮点击事件，加类选择器避免误绑定页面其他按钮
$("button.like-button").click(function() {
  // 直接查找当前点击按钮内部的图标元素，无需额外拼接id匹配，减少代码耦合
  $(this).find("i").toggleClass("fa-solid fa-regular");
});

原有HTML结构无需调整即可正常运行。

注意：如果使用Font Awesome免费版，需确认你引入的资源包包含fa-regular样式的thumbs-up图标，若对应图标资源未加载，会出现空白方块异常。

内容的提问来源于stack exchange，提问作者R.J. Jackson