How to change FontAwesome text color on hover?

Question

css

Hello. I have this code in CSS, I made the text change to white on hover.

.addtocart-bar span.addtocart-button input.addtocart-button{
  border: 1px solid @brand-primary;
  color: @btn-default-color;
  border-radius: 0;
  background: #fff;
  padding: 5px 10px 5px 30px;
  font-size: 16px;
  text-transform: uppercase;
  transition: all 0.3s;
  &:hover{
    background: @brand-primary;
    color: @w-text-color;
    transition: all 0.3s;
  }
}
.addtocart-bar span.addtocart-button{
  margin-left: 10px;
  position: relative;
  &:before{
    content: "\f07a";
    display: inline-block;
    font: normal normal normal 16px/1 FontAwesome;
    color: @text-color;
    position: absolute;
    top: 6px;
    left: 10px;
  }
}

How can I make the FontAwesome icon change from black to white when hovering the mouse over the button? Below is the image when hovering the mouse.

Tried to add

&:hover{
    	color: @w-text-color;
  }

After left: 10px; before }, but it didn't help. How to be?

Answer 1

Are you sure that you have white color in @w-text-color? This is 1, 2 if you need to color the icon, refer to it, for example like this

&:hover .fa{
    color: @w-text-color;
}