JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div class="container">
  <span class="icone facebook">Je change d'icone</span><br/>
  <span class="text contenu1"></span>
</div>

CSS

.container{
  border:1px solid red;
  width: 250px;
}

span{
  display: inline-block;
  margin: 20px 0;
  padding: 10px;
  border: 1px solid black;
}

.twitter::before{
  font-family: FontAwesome;
  content:'\f099';
  padding-right: 20px;
}

.facebook::before{
  font-family: FontAwesome;
  content:'\f09a';
  padding-right: 20px;
}

.contenu1::after{
  content: 'texte original';
}
.contenu2::after{
  content:'nouveau texte';
}

JavaScript

(function($){

	$('.container').on('click', function(){
  
  	$('.icone').toggleClass('facebook twitter');
  
    $('.text').toggleClass('contenu1 contenu2');
  
  });

})(jQuery);