FontAwesome эффект наведения не работает

Question

Я пытаюсь получить простой эффект зависания на кнопке, которая уже работает для фона кнопки &, но не для FontAwesome-Icon. Значок появляется только при не зависании. Я уже пробовал большинство комбинаций, например.

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

или

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

и многие другие комбинации, но я не могу заставить его работать правильно. Можете ли вы сказать мне, где моя ошибка и как она должна выглядеть? Вот что я уже получил. Помните, потому что я использую wordpress-theme, поэтому есть много классов. Для меня, как новичка это делает его еще труднее 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