JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css">
<div class="calendar">
  <i class="fa fa-trash"></i>
  <i class="fa fa-car"></i>
  <i class="fa fa-truck"></i>
  <i class="fa fa-cab"></i>
</div>

CSS

.calendar .fa-trash {
  color: blue;
}

.calendar .fa-car:before {
  color: yellow;
  content: "\f1f8";
}

.calendar .fa-truck:before {
  color: brown;
  content: "\f1f8";
}

.calendar .fa-cab:before {
  color: black;
  content: "\f1f8";
}