Question

我有两个问题：

unicode图标twitter不会翻转
所有unicode图标在悬停时都不会改变颜色（仅限背景）

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;
}

注意

我只是倾向于并且想指出 transform WON＆＃T; T除非显示元素display: block或display: inline-block 。因此，除非我添加icon-twitter

.icon-twitter {display: inline-block; ... transform...

Answer 1

您的悬停颜色不起作用，因为您在:before伪元素上设置了颜色，但是您尝试更改实际元素悬停时的颜色。它们是两个不同的东西。

改为定位:hover:before。

Fixed here.

更改的代码是：

[class^=icon-twitter]:hover,
[class^=icon-twitter]:hover:before {
    color: #fff;
    background-color: #3366FF;
}
[class^=icon-facebook]:hover,
[class^=icon-facebook]:hover:before {
    color: #fff;
    background-color: #0000FF;
}

Answer 2

您需要应用颜色并翻转到主元素，而不是前一个元素，或者您需要定位:hover:before而不是:hover

Fixed code using first method.

CSS不会翻转unicode字体图标，并且在悬停

注意

2 个答案: