MyBB Community Forums

So at the moment, I am trying to convert every image on the site to Font Awesome, and I'm looking to convert the Thread Rating Stars to Font Awesome Stars. I've been successful at editing the PHP to have Font Awesome, but am lost when it comes to the CSS. Linked below is my show thread css, how do I edit it to replace the star ratings?

.star_rating,

.star_rating li a:hover,
.star_rating .current_rating {
    background: url(images/star_rating.png) left -1000px repeat-x;
    vertical-align: middle;
}

.star_rating {
    position: relative;
    width:80px;
    height:16px;
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0;
    background-position: left top;
}

td .star_rating {
    margin: auto;
}

.star_rating li {
    display: inline;
}

.star_rating li a,
.star_rating .current_rating {
    position: absolute;
    text-indent: -1000px;
    height: 16px;
    line-height: 16px;
    outline: none;
    overflow: hidden;
    border: none;
    top:0;
    left:0;
}

.star_rating_notrated li a:hover {
    background-position: left bottom;
}

.star_rating li a.one_star {
    width:20%;
    z-index:6;
}

.star_rating li a.two_stars {
    width:40%;
    z-index:5;
}

.star_rating li a.three_stars {
    width:60%;
    z-index:4;
}

.star_rating li a.four_stars {
    width:80%;
    z-index:3;
}

.star_rating li a.five_stars {
    width:100%;
    z-index:2;
}

.star_rating .current_rating {
    z-index:1;
    background-position: left center;
}

.star_rating_success,
.success_message {
    color: #00b200;
    font-weight: bold;
    font-size: 10px;
    margin-bottom: 10px;
}

.inline_rating {
    background: url(images/star_rating.png) left -1000px repeat-x;
    float: left;
    vertical-align: middle;
    padding-right: 5px;
}

Tutorial here http://community.mybb.com/thread-155364.html