Как изменить цвет текста FontAwesome при наведении?

Question

[Максим]

Здравствуйте. У меня есть такой код в CSS, я сделал чтобы при наведении текст менялся на белый цвет.

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

Как сделать, чтобы менялась еще и иконка FontAwesome при наведении мышки на кнопку с черного на белый? Ниже картинка при наведении мышки.



Пробовал добавлять

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

После left: 10px; перед }, но не помогло. Как быть?

Answer 1

[Михаил Чирский]

А вы уверенны,что у вас в @w-text-color белый цвет приходит? Это 1, 2 если нужно покрасить иконку обращайтесь к ней, например так

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

Comments

[Максим]

В том, что в этой переменной белый цвет я уверен. Я этим цветом покрасил текст в кнопке при наведении в этой части кода.

&:hover{
background: @brand-primary;
color: @w-text-color;
transition: all 0.3s;
}

Куда мне нужно ваш код вставить? Я вставил вместо своего, но он не подошел. Наверное, потому что иконка корзинки выводится не в html, а сразу в less добавляется в этом месте:

&:before{
content: "\f07a";
display: inline-block;
font: normal normal normal 16px/1 FontAwesome;
color: @text-color;
position: absolute;
top: 6px;
left: 10px;
}

[Михаил Чирский]

Очевидно так
el:hover &:before
el - ваш элемент на который вы наводите, и вообще неплохо бы выучить базис, что к чему относится и как обращаться к селектору в CSS

[Максим]

Михаил Чирский:

Про базис согласен. Один раз учил, но без практики забывается.

Проблема наверное в том, что иконка передается через css.

И с помощью:

.addtocart-bar span.addtocart-button:hover &:before {
    color:white;
}

пришлось вот так написать

.addtocart-bar span.addtocart-button:hover{
  margin-left: 10px;
  position: relative;
  &:before{
	content: "\f07a";
	display: inline-block;
	font: normal normal normal 16px/1 FontAwesome;
	color: @w-text-color;
	position: absolute;
	top: 6px;
	left: 10px;
  }
}