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

내가 facign입니다 문제는 내가 텍스트 위로 마우스를 가져 가면 아이콘 글꼴을 강조하지 않습니다. 또한 텍스트는 # 8894a4가 아닌 임의의 색상을 선택합니다. 내가 고칠 수있는 방법이 있니?

감사합니다,

Answer 1

시도 :

&:hover:before { 
    color: *; 
}