XF 2.1 Пульсирующее сердечко на форум.

[aset]

Здравствуйте!
Хочу поставить такое красивое сердечко на форум. Как это сделать?



Сердечко на этом сайте.

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

 

[Jumuro]

Как это сделать?

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

 

[Mirovinger]

Приветствую.
А если точнее, там шрифтом реализовано.
<i class="fa fa-heart animate-pulse"></i>

 

[Skaiman]

можно и с font awesome сделать

 

[Captain]

aset,

 

[aset]

Вставил код
<i class="fa fa-heart animate-pulse"></i>
Сердечко не пульсирует.
Помогите криворукому.)

 

[Captain]

.animate-pulse {
    -webkit-animation: pulse 2s infinite linear;
    animation: pulse 2s infinite linear;
}

.p-footer-copyright .fa-heart {
    color: red;
}

Вставить в extra.less этот код.
Да и вставлять надо было вида <xf:fa icon="fa-heart animate-pulse " />

 

[Skaiman]

.animate-pulse {
    color: red;
    animation: heart-puls 2s linear infinite;
}

@keyframes heart-puls {
  0%{
    transform: scale(1);
  }
  50%{
    transform: scale(1.2);
  }
  100%{
    transform: scale(1);
  }
}

 

[aset]

Skaiman, Помогло. Спасибо большое всем! Сердечко круто смотрится ❤. Тема закрыта!

 

[Skaiman]

Есть еще способ анимировать иконки FA. Смотрим здесь:

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

Можно у них скачать css или воспользоваться CDN

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.2.1/font-awesome-animation.min.css" />

подключить с помощью модификации.
Потом выбираем иконку здесь:

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

не стесняемся, в последних версиях движка подключены все, выбираем какую надо, жмем на нее и копируем типа

<i class="far fa-adjust"></i>

что бы добавить анимацию, например pulse, просто добавим нужный класс:

<i class="far fa-adjust faa-pulse animated"></i>

что бы изменить цвет:

<i class="far fa-adjust faa-pulse animated" style="color: red"></i>

так же в style, можно добавить другие свойства, например размер шрифта и т.д.