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
Extending to the above answers, sometimes you want to add stroke/border to the font/icon. In that case the following is presented.
At least in WebKit. Example:
h1 {
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
Or shorthand:
h1 {
-webkit-text-stroke: 1px black;
}
The stroke works in WebKit but disappears in other browsers! Alternative? We can use the text-shadow property and simulate a stroke.
h1 {
text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}
We use four shadows, each 1px offset of black with no spread, one each to the top right, top left, bottom left, and bottom right.
The only holdout would be IE9 and down, which of course you can use IE specific CSS to account for.
P.S. For my own reference as well.
Source: Link