SCSS：锚标记中的图标字体和文本

Question

我想在锚标记中使用图标字体和文本，并希望它在悬停时更改颜色。我正在使用scss进行样式设计。

到目前为止我的代码是：

<span class="sidebar-list"><a href="#"><span class="icon-SpeechBubble">&nbsp;</span>Live Chat</a></span>

SCSS

 .sidebar-list {
     a {
         color:#8894a4;
         font-family:$font-GlobalFamily;
         font-size:13px

         &:hover {
             color:#fff;
             cursor:pointer;
             text-decoration:none;
         }
     }
 }

 .icon-SpeechBubble:before {
     content: "\e633";
     font-size:13px;
 }

我所面临的问题是，当我将鼠标悬停在文本上时，图标字体不会突出显示。此外，文本正在拾取一些不是＃8894a4的随机颜色。有没有办法解决它？

谢谢，

Answer 1

尝试：

&:hover:before {
    color: *;
}