Font-удивительный значок парит отдельно от текста

Я использую шрифт удивительные значки, чтобы сопровождать элементы списка в панели навигации, как так:Font-удивительный значок парит отдельно от текста

    <li class="page-scroll"> 
        <a href="#"><i class="fa fa-clock-o"></i> Latest</a> 
       </li>

CSS:

.navbar .navbar-nav li a { 
    color:#f0f0f0; 
    -webkit-transition: all ease 1s; 
    -moz-transition: all ease 1s; 
    transition: all ease 1s; 
} 

.navbar .navbar-nav li a:hover { 
    color:#7dbd83; 
    -webkit-transition: all ease 1s; 
    -moz-transition: all ease 1s; 
    transition: all ease 1s; 
}

Я попробовал несколько вещей, таких как создание отдельного CSS, содержащего только i и i: hover и изменяющий цвет зависания независимо от текста. Я также попытался включить i и i: наведите курсор в css ниже, но это полностью разрушает эффект.

Как я могу получить значок для изменения цвета при наведении одновременно с текстом?

источник

2015-10-17 user3574766

Пожалуйста, предоставьте jsfiddle. – Alex

Меняет цвет с текстом http://jsfiddle.net/sandenay/krahhxwp/1/ –

Я ... он работает без классов .navbar .navbar-nav ... может быть, есть проблемы с вашими классами - http://jsfiddle.net/216n0gxs/5/ –

<html> 
<head> 
<script> 

</script> 
<style> 

.animate_it{ 
color:#f0f0f0; 
-webkit-transition: color 2s; 
-moz-transition: color 2s; 
transition:color 2s; 
    } 

    .animate_it:hover{ 
    color:#7dbd83; 
    -webkit-transition: color 2s; 
    -moz-transition: color 2s; 
    transition: color 2s; 
    } 
    </style> 
    </head> 
    <body> 
       <li class="page-scroll"> 
       <a href="#"><i class="animate_it" > Latest</i></a> 
       </li> 
    </body> 
    </html>

источник

2015-10-17 10:38:01

просто используйте простой класс –

Font-удивительный значок парит отдельно от текста

ответ

Смежные вопросы