FontAwesome hover effect not working
<p>I'm trying to get a simple hover effect on a button, which already works for the button background &amp; text, but not for the FontAwesome-Icon. The Icon only appears with non-hover. I already tried most combinations e.g.</p>

<pre><code>fa-chevron-right:hover:before {color: X;}
</code></pre>

<p>or</p>

<pre><code>.vc_btn-icon3:hover .fa-chevron-right { color: X;}
</code></pre>

<p>and many other combinations, but I can't get it to work the right way. May you tell me where my mistake is and how it has to look like? Here is what I already get. Be aware, cause I am using a wordpress-theme, therefore there are many classes. For me as a newcomer it makes it even harder to geht things right :/</p>

<p>HTML</p>

<pre><code> &lt;div class="shortcode-action-container action-button"&gt;
    &lt;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"&gt;
    &lt;span&gt;Mehr Informationen 
    &lt;i class="vc_btn3-icon fa fa-chevron-right"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/a&gt;&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>#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;
}
</code></pre>

<p>Thanks!</p>