Как совладать с иконочным шрифтом?

Question

[Meddelin]

Добрый вечер.

<div class="cart">
                    <a href="#" class="cart-a"> <i class="basket"></i> Корзина </a>
 </div>

в тег "i" заключён иконочный шрифт. Нужно, чтобы он был одного цвета, а "Корзина" другого, но при использовании ":hover" всё это окрашивалось в один цвет. Подскажите, пожалуйста, как это реализовать. Вроде, просто, но очень долго не могу понять, что именно я делаю не так.

Answer 1

[Анатолий Филиппов]

Я просто добавил дополнительные стили:

<a href="#" class="cart-a test"><i class="icon-basket test2"></i><span>Корзина</span></a>

.test {color:#000}
.test2 {color:#ccc}

.test:hover, .test:hover .test2 {color:red}

И все заработало

Comments

[Meddelin]

Действительно. Как же я был глуп. Большое спасибо :)

Answer 2

[Дмитрий Сергеевич]

jsfiddle здесь бы не помешал

.cart-a:hover .basket {
    color: red;
}

Comments

[Meddelin]

Нужно ещё изменить цвет "Корзина" при этом, с этим и есть наибольшая загвоздка. Максимум, чего я смог добиться, так это того, что меняли цвет они по отдельности, а не одновременно.

[Meddelin]

https://jsfiddle.net/te5jpo72/1/ вот, собственно, jsfiddle.

Answer 3

[Александр]

Можно воспользоваться таким замечательным CSS правилом, как !important
Вот пример: https://jsfiddle.net/te5jpo72/5/