CSS won't flip a unicode font icon and won't change it's color on hover

I have 2 problems:

1. The unicode icon twitter won't flip
2. All unicode icons won't change color on hover (Only the background)

jsFiddle:

HTML

<span class="icon-twitter-circle"></span> Follow us</br>
<span class="icon-facebook-circle"></span> Like us

CSS

[class^=icon] {
    font-family: Arial, Helvetica, Tahoma, Verdana, "Courier New", "Times New Roman", sans-serif;
    /* UNICODE only! No custom font files. No images */
}
[class^=icon-facebook]:before {
    content: "\024D5";
    content: "\00066";
    color: #0000FF;

    font-size: 1.5em;
    font-weight: bold;
}
[class^=icon-twitter]:before {
    content: "\01F426";
    color: #3366FF;
    font-size: 1em;

    transform: scale(-1, 1); /* Flips the text */
}
[class$=-circle] {
    display: inline-block;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    padding: 0.30em; /* Size of circle */
    margin: 0.10em 0.0em; /* Line spacing */
    border: 1px solid #000;

    line-height: 20px; /* Centers the character Horizontally, on it's Y-axis */
    text-align: center; /* Centers the character vertically, on it's X-axis */
}
[class^=icon-twitter]:hover {
    color: #fff;
    background-color: #3366FF;
}
[class^=icon-facebook]:hover {
    color: #fff;
    background-color: #0000FF;
}