Изменение цвета отдельных значков при наведении указателя мыши

Question

Первый вопрос в StackOverflow.

Я разобрал свою голову, чтобы понять это. Мои параметры главного меню (@gabrielpinto.pt) сделаны из текста и значка (FontAwesome).

Я хочу изменить цвет наведения значка КОГДА Я нахожу ссылку на письменную ссылку.

Вот один из разметки для выбора пункта меню в:

<nav id="site-navigation" class="main-navigation col-md-8" role="navigation"> 
 
    <div class="menu-menu-principal-container"> 
 
    <ul id="menu-menu-principal" class="menu nav-menu"> 
 
     <li id="menu-item-24" class="fa-street-view menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-24"> 
 
     <a href="http://gabrielpinto.pt/">Gabriel Pinto</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</nav>

Я просто новичок в HTML и CSS, и я пробовал много разных правил, но без какого-либо положительного результата.

Пример:

a.fa-street-view:hover li::before { 
color: #bc4676; } 

Что CSS правило сделает его работу?

Answer 1

Это будет работать:

.fa-street-view:hover { 
    color: #bc4676; 
} 

Вот пример:

http://jsfiddle.net/gtr45hk7/

Редактировать

Я добавил .fa класс к .fa-street-view в вашем HTML, чтобы сделать пример Работа.

Edit 2

Я просто смотрел на ваш сайт. Попробуйте это:

.main-navigation li:hover::before { 
    color: #bc4676; 
} 

Если вы хотите, чтобы соответствовать ссылке переходы, это может сделать трюк:

.main-navigation li::before { 
    -webkit-transition: color 0.3s; 
    transition: color 0.3s; 
}