Как реализовать интересный логотип сайта на основе fontawesome и animate.css

Народ, есть сайт на altocms, правда там его автор много чего передел и заточил под себя. Мне понравилась реализация вращающего сердца из иконки fontawesome и я попытался реализовать на своем сайте. Ни хрена не получается. С автором общался в онлайне насчет этого.... ну или я слишком тупой или он не желает просто так помогать казалось бы в трех строчках кода. Вот его ответ на мои вопросы:
Я сделал так: 
1. Подключил библиотеку: 
<link type="text/css" rel="stylesheet" href="/путь к файлу/animate.min.css" /> 
2. Прописал код: 
<a class="site-header-title" href="http://liverp.loc/">Живи <i class="fas fa-heartbeat"></i> RolePlay</a> 
3. В скрипте прописал каждые 5 секунд вращать: 
jQuery(document).ready(function() { 
setInterval(function() { 
$('.site-header-title i').animateCss('flip', function() { 
// Do somthing after animation 
}); 
}, 5000); 
}); 
Иконка сердца из библиотеки: 
https://fontawesome.com/


Ну я у себя на сайте прописал все и подключал js этот его и отдельным файлом и в шаблоне пробовал — нифига не работает. Выводится сердечко черного цвета и нихрена не вращается...
Кто знает как конкретно реализовать такой логотип или кому интересна эта тема в принципе — прошу комментировать и если есть возможность помочь реализовать это дело.
Да, вот еще ссылка на то что нужно помимо того, что я озвучил https://github.com/daneden/animate.css

Спасибо.

Использование иконочного шрифта Font Awesome в дизайнерских программах

Это короткая заметка о том как использовать Font Awesome в фотошопе, люстре, кореле и т.д. например если вы используете эти иконки в дизайне. Что такое Font Awesome и зачем он нужен можно почитать здесь.

Читать дальше →