Как отключить анимацию у иконок, а кружки вращались постоянно?

Question

[XinnogeN]

Здравствуйте! Помоите пожалуйста! Как отключить анимацию у иконок, а кружки (родительский элемент) вращались постоянно?

Пример

https://codepen.io/XinnogeN/pen/ERZgKQ/

Answer 1

[Андрей Б.]

Круг сделать псевдоэлементом и применять анимацию к нему. У вас ведь в LI есть дочерние элементы, поэтому все и крутится.
https://codepen.io/anon/pen/mKRrqb

Comments

[XinnogeN]

Здравствуйте! Андрей Б. Спасибо большое! Но как убрать квадраты при наведении что бы было как раньше до этого? Не судите строго-я только учусь!

[Андрей Б.]

XinnogeN
Обновил пример, сделал только для Facebook, остальное сами

.social-icons .facebook:hover:before {
    border-color: #3b5998;
    box-shadow: 0 0 15px #3b5998;
    transition: all 0.3s ease;
}

[XinnogeN]

Андрей Б., Еще раз огромная Вам благодарность!!! Все четко!

[Андрей Б.]

У вас еще свойства дублируются.
Правильней было бы написать так:

.social-icons li:hover .fab {
   color: white;
   text-shadow: 0 0 15px white;
   transition: all 0.3s ease;
}

[XinnogeN]

Андрей Б., Я понял, сппасибо за подсказку! Так и сделаем.

[XinnogeN]

Андрей Б., Уважаемый Андрей Б, прошу прощения за настойчивость, скажите а вы в DLE не работаете? а то в CODEPEN-е все работает а вот у меня на странице нет. Все сделал как вы показали а кружки изчезли вместе с анимацией.

[Андрей Б.]

@XinnogeN
Вы копипастили из codepen? Если да, то я там использовал синтаксис SCSS, если препроцессором не пользуетесь, то нужно написать в обычном CSS синтаксисе.
Поправил, проверьте у себя.
Если не заработает, значит косяк в другом, показывайте страницу.

[XinnogeN]

Все супер! Работает!

[XinnogeN]

Андрей Б., Благодаря вам реолезовал такую фишку
codepen
Если вы не против я буду к вам обращаться за помощью! Заранее благодарен.
Не подскажете почему border dashed не правильно отображается на мобильных? в частности на плашете в лисе т.e. одной черточке в кружке нет.