Статически вращать шрифт-удивительные иконки

Question

Статически вращать шрифт-удивительные иконки

Я хотел бы статически повернуть мой шрифт-удивительные значки на 45 градусов. На сайте написано, что:

чтобы произвольно вращать и переворачивать значки, используйте классы fa-rotate-* и fa-flip -*.

, занимался

<i class="fa fa-link fa-rotate-45" style="font-size:1.5em"></i>

не работает, а замены fa-rotate-45 С fa-rotate-90 делает. Означает ли это, что они на самом деле не могут вращаться произвольно?

569 5

css rotation font-awesome

5 ответов:

Comments

Ничего не найдено.

KittMedia · Accepted Answer · 2014-03-30 20:27:38

стандартные объявления просто содержат .fa-rotate-90,.fa-rotate-180 и .fa-rotate-270. Однако вы можете легко создать свой собственный:
.fa-rotate-45 {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

PseudoNinja · Accepted Answer · 2016-03-22 16:26:12

в случае, если кто-то еще натыкается на этот вопрос и хочет, чтобы он вот SASS mixin я использую.
@mixin rotate($deg: 90){
    $sDeg: #{$deg}deg;

    -webkit-transform: rotate($sDeg);
    -moz-transform: rotate($sDeg);
    -ms-transform: rotate($sDeg);
    -o-transform: rotate($sDeg);
    transform: rotate($sDeg);
}

Peter Mortensen · Accepted Answer · 2015-04-11 12:24:56

Если вы хотите повернуть на 45 градусов, вы можете использовать свойство преобразования CSS:
.fa-rotate-45 {
    -ms-transform:rotate(45deg);     /* Internet Explorer 9 */
    -webkit-transform:rotate(45deg); /* Chrome, Safari, Opera */
    transform:rotate(45deg);         /* Standard syntax */
}

Noopur Dabhi · Accepted Answer · 2018-02-08 11:40:24

Новый Шрифт-Удивительный v5 и Власть Превращает

вы можете повернуть любой значок, добавив атрибут data-fa-transform значок
<i class="fas fa-magic" data-fa-transform="rotate-45"></i>
здесь скрипка

для получения дополнительной информации, проверить это : Font-Awesome5 Power Tranforms

StackHola · Accepted Answer · 2015-04-11 12:26:57

Если вы используете меньше вы можете непосредственно использовать следующий mixin:
.@{fa-css-prefix}-rotate-90  { .fa-icon-rotate(90deg, 1);  }