XF 2.1 Spinner icons FA перед ником

[Vandal123]

Добрый вечер. У меня такая проблема, я не могу добавить Spinner Icons перед ником форумника, обычные иконки ставятся а вот именно крутящиеся не могу поставить. Заранее спасибо

 

[Виталий Васильевич]

я так пологаю Вы видели пример ? или сами так хотите ?

 

[Vandal123]

Я не совсем понял о чем Вы...

 

[Виталий Васильевич]

Вы хотите гифку поставить? ну чтоб возле ником форумника была?

 

[Vandal123]

Да-да-да, все верно

 

[Виталий Васильевич]

подробности тут ..

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

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

а дальше думаю через ТМС

 

[Mirovinger]

animation: spin 2s infinite linear;

@keyframes pin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

К нужному классу, если проблем с самими иконками нету.

 

[Skaiman]

Добавь к коду для иконки

animation: fa-spin 2s infinite linear;

Mirovinger, это уже есть в core_fa.less

@keyframes fa-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

 

[Mirovinger]

Я как бы знаю, но лучше перестраховаться, тем более keyframes, можно и по другому назвать никто не мешает.
Изначально я тоже без keyframes написал, но если человек не будет знать, что и откуда, то смысл тогда.

 

[Vandal123]

Я все делаю так как Вы написали, но что-то иконка как не крутилась так и не крутится...

 

[Skaiman]

Я все делаю так как Вы написали, но что-то иконка как не крутилась так и не крутится...

Покажи что делаешь

 

[Vandal123]

Добавил в шаблон extra.less вот это:

@keyframes pin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

потом добавил к этому коду

.username-style-id(@styleId; @content) {
    .username {
        &--style@{styleId} {
            &:before {
                content: "\@{content}";
            }
        }
    }
}

.username {
    & :before {
    .m-faBase();
    padding-right: 4px;
    }
}
.username-style-id (id, unicod);

эту строчку:

animation: fa-spin 2s infinite linear;

 

[Skaiman]

потом добавил к этому коду эту строчку:

Напиши как добавил, куда

.username {
    & :before {
    .m-faBase();
    padding-right: 4px;
    animation: fa-spin 2s infinite linear;
    }
}

так7

 

[Vandal123]

Вот

.username-style-id(@styleId; @content) {
    .username {
        &--style@{styleId} {
            &:before {
                content: "\@{content}";
            }
        }
    }
}

.username {
    & :before {
    .m-faBase();
    animation: fa-spin 2s infinite linear;
    padding-right: 4px;
    }
}
.username-style-id (3, f013);

 

[Skaiman]

Не так надо, ниже

.username-style-id (3, f013);

.username--style3:before {
  animation: fa-spin 2s infinite linear;
}

 

[Vandal123]

Добавил я это ниже этой стички

.username-style-id (3, f013);

вот только все равно она почему то не вращается...

 

[West14]

Слово после @keyframes должно совпадать со словом в свойстве animation, это если по простому.
А так, курим вебреф на предмет ксс анимаций.

 

[DimmmCom]

вот только все равно она почему то не вращается...

В данном случае анимация применяется к псевдоэлементу :before. Чтобы срабатывала анимация с псевдоэлементом, ему нужно добавить свойство позиционирования position или определить тип отображения display
В этом примере лучше использовать display: inline-block;

.username-style-id(@styleId; @content) {
    .username {
        &--style@{styleId} {
            &:before {
                content: "\@{content}";
                animation: fa-spin 2s infinite linear;
                display: inline-block;
            }
        }
    }
}

 

[Mirovinger]

Вообще не понимаю, после увиденного кода, почему не в теме мануала обсуждаем?