JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<button id="nav-btn">
  <i class="fas fa-bars fa-fw"></i>
</button>

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

CSS

#nav-btn.open > .fa-bars::before {
  content: "\f00d"; /* this is the fa-times unicode */
}

#nav-btn {
  background: #000;
  color: #fff;
  font-size: 5rem;
  border-radius: 1rem;
  border: 0;
  line-height: 1;
  padding: 1rem;
}

#nav-btn:hover {
  cursor: pointer;
  background: red;
}

#nav-btn:focus {
  outline: 0;
}

JavaScript

// nav button on click function
$(document).on('click','#nav-btn', function(e) {
 
   // toggle nav button open class
   $(this).toggleClass('open');

});