JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
You can style them in different ways:
<br><br>

<i class="icon-star-empty icon-large"></i>

<i class="icon-star-empty icon-large" style="color: orange;"></i>

<i class="icon-star-empty icon-large" style="color: yellow;"></i>
<br><br>

<i class="icon-star icon-large"></i>

<i class="icon-star icon-large" style="color: orange;"></i>

<i class="icon-star icon-large" style="color: yellow;"></i>
<br><br>
    
<i class="icon-star icon-large color"></i>

<i class="icon-star icon-large color" style="color: orange;"></i>

<i class="icon-star icon-large color" style="color: yellow;"></i>  
<br><br>
But, it sounds like you're looking to do something like this:
<br></br>
State 1: <i class="icon-star-empty icon-large icon-a"></i><br><br>
State 2: <i class="icon-star-empty icon-large icon-b"></i><br><br>
State 3: <i class="icon-star icon-large icon-c"></i> or <i class="icon-star icon-large icon-d"></i>

CSS

body {
    font-family: arial;
}

.color {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
}

.icon-a {
    color: #AAA;
}

.icon-b {
    color: orange;
}

.icon-c {
    color: yellow;
}

.icon-d {
    color: yellow;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: orange;
}