I am currently facing 2 issues:
- The unicode icon for Twitter is not flipping
- None of the unicode icons change color on hover (Only the background)
Check out the jsFiddle link here:
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 its Y-axis */
text-align: center; /* Centers the character vertically, on its X-axis */
}
[class^=icon-twitter]:hover {
color: #fff;
background-color: #3366FF;
}
[class^=icon-facebook]:hover {
color: #fff;
background-color: #0000FF;
}
Note
I recently discovered that transform won't work unless the element is displayed as either display: block or display: inline-block. Therefore, the icon-twitter won't flip until I add
.icon-twitter {display: inline-block; ... transform...