如何在js中将字体真棒图标切换

Question

嗨，我有这样的代码：

$(document).ready(function() {
  $("#toggle").click(function() {
    var elem = $("#toggle").text();
    if (elem == "Show more") {
      $("#toggle").text("Show less");
      $("#text").slideDown();
    } else {
      $("#toggle").text("Show more");
      $("#text").slideUp();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="btn-container">
  <button id="toggle">Show more</button>
</div>

在显示更多中我想添加一个图标/ f078在显示较少中/ f106。 如何添加？我用CSS和HTML标记尝试过，但没有用。