如何实现点击a标签包裹的图标变色、页面重载后恢复原色的效果

针对你的需求可通过「CSS新增状态样式+JS批量绑定点击事件」的方案实现，适配多图标场景性能无压力，页面刷新后自动重置样式： #

1. 新增CSS样式 #

在你现有CSS代码中补充点击后状态的样式规则，可自行调整色值为需要的效果：

a {
  text-decoration: none;
}

.dog-icon:before {
  content: "\f6d3";
  font-family: 'Font Awesome 5 Free';
  font-size: 40px;
  font-weight: 900;
  padding: 40px;
}
/* 新增：点击后图标样式 */
.dog-icon.visited:before {
  color: #e63946;
}

2. 添加JS交互逻辑 #

在页面底部插入以下JS代码，自动绑定所有图标链接的点击事件：

// 页面DOM加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  // 批量获取所有目标图标链接
  document.querySelectorAll('.dog-icon').forEach(iconEl => {
    iconEl.addEventListener('click', function() {
      // 点击后添加已访问标记类
      this.classList.add('visited');
    });
  });
});

注意事项 #

不推荐使用CSS原生:visited伪类实现该需求：该伪类会关联浏览器历史记录，用户访问过的链接即便刷新页面也会保持访问状态，不符合你刷新重置的要求，同时该伪类可修改的CSS属性存在诸多限制，灵活性极差。

该方案无需额外依赖，数百个图标批量绑定事件也不会出现性能问题，点击后样式立即生效，页面刷新后所有状态自动清空恢复原始样式，完全匹配你的需求。

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