点击触发onclick事件后Font Awesome图标消失仅显示数值如何解决

问题的核心原因是text()方法会覆盖目标元素内的所有内容，包括嵌套的子元素（也就是你用到的Font Awesome图标<i>标签）。
原<a>标签内同时包含了<i>图标节点和数字文本节点，你直接调用$('.fedde390d').text(+checkDown + 1)时，会把<a>标签里原有的<i>图标节点直接删除，仅保留新设置的数字文本，所以图标就会消失。

推荐两种可落地的修复方式：

• 方式一：给数字单独加标签包裹，仅修改数字部分的内容（推荐，可维护性更高）
  第一步调整HTML结构，给统计数值单独套<span>标签：

  <ul>
    <li class="lfi93uf23"><a class="fedde390d" title="LIKE!"><i class="fa fa-thumbs-o-up"></i> <span class="like-count">625</span></a></li>
    <li class="v4da7hf3s"><a class="q0fb5ba04" title="DISLIKE!"><i class="fa fa-thumbs-o-down"></i> <span class="dislike-count">365</span></a></li>
  </ul>
  

  第二步修改JS逻辑，仅更新<span>内的文本：

  $('.lfi93uf23').one('click', function(){
        var checkDown = $('.like-count').text();
        $('.like-count').text(+checkDown + 1);
        $('i.fa.fa-thumbs-o-down').css({'color':'#B4B4B4'});
        $('.q0fb5ba04').css({'color':'#B4B4B4'});
        $('.v4da7hf3s').unbind('click');
    });
  
    $('.v4da7hf3s').one('click', function(){
        var checkDown = $('.dislike-count').text();
        $('.dislike-count').text(+checkDown + 1);
        $('i.fa.fa-thumbs-o-up').css({'color':'#B4B4B4'});
        $('.fedde390d').css({'color':'#B4B4B4'});
        $('.lfi93uf23').unbind('click');
    });
  

• 方式二：不改HTML结构，拼接图标元素和新数值再赋值（适合快速临时修复）
  把点赞逻辑中设置文本的行替换为：

  $('.fedde390d').html('<i class="fa fa-thumbs-o-up"></i> ' + (+checkDown + 1));
  

  把点踩逻辑中设置文本的行替换为：

  $('.q0fb5ba04').html('<i class="fa fa-thumbs-o-down"></i> ' + (+checkDown + 1));
  

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