Is it possible to color the fontawesome icon colors?

Question

I can change fontcolor, but not the \"fill\". I first tried setting background-color, but that fills the whole icon box area.

For example, I have

Answer 1

I recently did this with very simple CSS using only a single font-awesome icon. These icons are rendered as an SVG.

How it works is I'm using the solid/filled icon but turning it white and adding a black border to make it look empty. Upon clicking it, I can toggle the .fill class to change the color to gold, making it solid.

HTML:

CSS:

.fa-star {
    stroke: #000;
    stroke-width: 30px;
    color: white;
    cursor: pointer;
}

.fa-star.fill {
     color: #ffd700 /* gold */
}

JS for toggle using jQuery:

$('body').on('click', ".fa-star", function () {
     favorite(this);
});

function favorite(item) {
     $(item).toggleClass("fill");
}