JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div>
  <span class="star glyphicon glyphicon-star-empty"></span>
</div>

<br/>

<div>
  <i class="heart fa fa-heart-o"></i>
</div>

CSS

.star {
  font-size: 25px;
	color:gold;
}

.heart {
  font-size: 25px;
	color:red;
}

JavaScript

$(".star.glyphicon").click(function() {
  $(this).toggleClass("glyphicon-star glyphicon-star-empty");
});

$(".heart.fa").click(function() {
  $(this).toggleClass("fa-heart fa-heart-o");
});