Дмитрий Филатов

https://jsfiddle.net/4j29ru5h/18/

Красиво сам оформишь =)

Просто сделайте два элемента.

Обратите внимание, что у кнопки есть классы "closed" и "opened", от которых зависит внешний вид кнопки. Следовательно, элементы делим по этому классу.

// Бургер
<a href="#" class="menu-icon js-menu_toggle closed">
......
</a>

// Крестик
<a href="#" class="menu-icon js-menu_toggle opened">
......
</a>

В js в функциях, обрабатывающих клики по кнопкам, удалите "$(this).removeClass('...').addClass('...');".

Элемент крестика уже на месте, а вот бургер нужно вынести за пределы элемента "side_menu".

Исходя из ответа на Ваш предыдущий вопрос собрал единую картину.
HTML:
<div class="dark"></div>
CSS:

.dark {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  cursor: pointer;
  z-index: 9999;
}

function close_l() {
$('.dark').css({'display': 'none'})
	$('.list_load, .list_item').stop();
	$('.js-menu_toggle.opened').removeClass('opened').addClass('closed');

	$('.side_menu').css({ 'left':'-270px' });

	var count = $('.list_item').length;
	$('.list_item').css({
		'opacity':'0',
		'margin-left':'-20px'
	});
	$('.list_load').slideUp(0);
}

$(document).on('click','.dark',function(e){
 close_l();
});

$(document).on('click','.js-menu_toggle.opened',function(e){
 close_l();
});

HTML:
<div class="dark"></div>
CSS:

.dark {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  cursor: pointer;
  z-index: 9999;
}

JS:

$(document).on('click','.js-menu_toggle.closed',function(e){
	$('.dark').css({'display': 'block'})
        //
}
$(document).on('click','.js-menu_toggle.opened',function(e){
	$('.dark').css({'display': 'none'})
       //
}