アコーディオンメニュー　アイコンを変えたい

アコーディオンメニューでリンク先でもクッキーで記憶して開いたままにするコードは書けたのですが、アイコンの切り替えをどこに付け足したらいいか分からなくなってしまいました。
ｃｓｓでアイコンを付けています。

<div class="menu-all">
     
     <span>メールメニュー</span>
       <ul id="child1">
            <li><a href="">未読メール</a></li>
            <li> <a href="">全てのメール</a></li>
            <li><a href="">送信済メール</a></li>
            <li> <a href="">会話表示</a> </li>
        </ul>
　　　　　 <span>写真登録</span>
          <ul id="child2">
            <li><a href="">写真登録</a></li>
          </ul>
<script>

$(function () {
  for (var i = 1; i <= $('ul').length; i++) {
    // クッキーがblockであれば読み込み時にメニューをオープンする 
    if ($.cookie('child' + i) == 'block') {
      $('#child' + i).show(); 
    }
  }
  
  $('span').click(function() {
    var child = $(this).next('ul');
    // メニュー表示/非表示
    $(child).slideToggle('fast', function() {
      // 有効期限は1日（クッキーにはドメインをセットしない、ブラウザを閉じたら初期化）
      $.cookie($(child).attr('id'), $(child).css('display'), { expires: 1 });
    });
  });
});


</script>

↓↓これはクッキーで記憶せず単純に開閉するだけのコードです
これを上のコードと組み合わせたいです。
$(function(){
    $('span').each(function(){
        $(this).on('click',function(){
            $(this).toggleClass('on');
            $("+.ul",this).slideToggle();
			
	       //一つ開いたら後は閉じる 
	$('span').not($(this)).removeClass('on').siblings('ul').slideUp();
      	return false;
        });
    });
});

ここからcssです

.menu-all span:before {
  background:#009FFF;
  content: '\f067';
  display: block;
  font-family: "Font Awesome 5 Free";
  float:right;
  text-align: center;
  width: 60px;
}
.menu-all span.on:after {
  content: '\f068';
}