The unicode character 'Heavy Plus Sign', aka U+2795 (or, more simply ➕) likes to play mean with the css color attribute:
No matter the color, it stays black. I thought I was crazy, so I changed to another unicode plus sign, and the color changed as it should. 'Heavy Plus Sign' appears not to be a team player.
However, it seems that where there is a will, there is, in fact, a way.
For reasons unknown, there is a color attribute that sticks to the Heavy Plus: color: transparent. Guess it's all or nothing with this one.
Once you make the symbol transparent, you can add in text-shadow: 0 0 $color, you've got yourself a colored icon:
This support seems to dropoff in IE9. If you want to provide a fallback, filter: dropshadow(color=$color, offx=0, offy=0); is the standard text-shadow fallback...but I did not test this. 👻
May the Heavy Plus be with you. - Shaun
