FontAwesome懸停效果不起作用

Question

我試圖在按鈕上獲得簡單的懸停效果，該按鈕已經適用於按鈕背景&文本，但不適用於FontAwesome-Icon。該圖標僅在非懸停狀態下顯示。我已經嘗試過大部分組合

fa-chevron-right:hover:before {color: X;} 

或

.vc_btn-icon3:hover .fa-chevron-right { color: X;} 

等多種組合，但我不能讓它開始工作的正確途徑。你可否告訴我我的錯誤在哪裏以及它的樣子？這是我已經得到的。請注意，因爲我使用的是wordpress主題，所以有很多類。我作爲一個新人這使得它更難geht正確的事情：/

HTML

<div class="shortcode-action-container action-button"> 
    <a href="LINK" class="btn-shortcode dt-btn-l dt-btn default-btn-color 
    default-btn-hover-color default-btn-bg-color default-btn-bg-hover-color 
    fadeIn animate-element animation-builder" 
    target="_blank" id="dt-btn-1"> 
    <span>Mehr Informationen 
    <i class="vc_btn3-icon fa fa-chevron-right"></i></span></a></div> 

CSS

#dt-btn-1 { 
background-color:#002E5B; 
color: #fff; 
font-family: Montserrat; 
font-size: 14px; 
line-height: 23px; 
font-weight: 700; 
background: #002E5B; 
border: solid 3px transparent; 
padding: 8px 21px; 
} 

.vc_btn3-icon { 
margin-left: 0.5em; 
margin-right: 0px !important; 

.fa-chevron-right:before { 
font-family: FontAwesome; 
color: #002e5b; 
content: "\f054"; 
font-size: 14px; 
line-height: 14px; 
color: #fde428; 
} 

#dt-btn-1:hover { 
background: none; 
background: transparent !important; 
background-color: transparent !important; 
border-color: #fff !important; 
border-radius: 3px; 
color: #002e5b !important; 
border: solid 3px #fff; 
-webkit-transition: all .2s ease-in-out; 
transition: all .2s ease-in-out; 
} 

謝謝！

Answer 1

爲目標的圖標的正確方法是使用下面的選擇：

#dt-btn-1:hover .fa-chevron-right:before { ... } 

這裏是一個工作演示：

a {text-decoration: none;} 
 

 
#dt-btn-1 { 
 
    background-color: #002E5B; 
 
    color: #fff; 
 
    font-family: Montserrat; 
 
    font-size: 14px; 
 
    line-height: 23px; 
 
    font-weight: 700; 
 
    background: #002E5B; 
 
    border: solid 3px transparent; 
 
    padding: 8px 21px; 
 
} 
 

 
.vc_btn3-icon { 
 
    margin-left: 0.5em; 
 
    margin-right: 0px !important; 
 
} 
 

 
.fa-chevron-right:before { 
 
    font-family: FontAwesome; 
 
    color: #002e5b; 
 
    content: "\f054"; 
 
    font-size: 14px; 
 
    line-height: 14px; 
 
    color: #fde428; 
 
    transition: all .2s ease-in-out; 
 
} 
 

 
#dt-btn-1:hover { 
 
    background: none; 
 
    background: transparent !important; 
 
    background-color: transparent !important; 
 
    border-color: #fff !important; 
 
    border-radius: 3px; 
 
    color: #002e5b !important; 
 
    border: solid 3px #fff; 
 
    -webkit-transition: all .2s ease-in-out; 
 
    transition: all .2s ease-in-out; 
 
} 
 

 
#dt-btn-1:hover .fa-chevron-right:before { 
 
    color: red; 
 
}

<div class="shortcode-action-container action-button"> 
 
    <a href="LINK" class="btn-shortcode dt-btn-l dt-btn default-btn-color 
 
    default-btn-hover-color default-btn-bg-color default-btn-bg-hover-color 
 
    fadeIn animate-element animation-builder" target="_blank" id="dt-btn-1"> 
 
    <span> 
 
     Mehr Informationen 
 
     <i class="vc_btn3-icon fa fa-chevron-right"></i> 
 
    </span> 
 
    </a> 
 
</div>

請注意，你的CSS代碼無效，因爲：

.vc_btn3-icon { 
margin-left: 0.5em; 
margin-right: 0px !important; 

} < - 缺少

.fa-chevron-right:before { 

working jsFiddle demo