Перед FontAwesome 5:
Стандартные объявления просто содержат .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);
}
С FontAwesome 5:
Вы можете использовать так называемые «силовые преобразования». Пример:
<i class="fas fa-snowman" data-fa-transform="rotate-90"></i>
<i class="fas fa-snowman" data-fa-transform="rotate-180"></i>
<i class="fas fa-snowman" data-fa-transform="rotate-270"></i>
<i class="fas fa-snowman" data-fa-transform="rotate-30"></i>
<i class="fas fa-snowman" data-fa-transform="rotate
Вам нужно добавить data-fa-transform
атрибут со значением rotate-
и желаемым поворотом в градусах.
Источник: https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms
Если кто-то еще наткнется на этот вопрос и захочет, вот миксин SASS, который я использую.
@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); }
источник
В новом Font-Awesome v5 есть Power Transforms
Вы можете повернуть любой значок, добавив атрибут
data-fa-transform
к значку<i class="fas fa-magic" data-fa-transform="rotate-45"></i>
Вот скрипка
Для получения дополнительной информации ознакомьтесь с этим: Font-Awesome5 Power Tranforms
источник
Если вы хотите повернуть на 45 градусов, вы можете использовать свойство CSS transform:
.fa-rotate-45 { -ms-transform:rotate(45deg); /* Internet Explorer 9 */ -webkit-transform:rotate(45deg); /* Chrome, Safari, Opera */ transform:rotate(45deg); /* Standard syntax */ }
источник
Если вы используете Less, вы можете напрямую использовать следующий миксин:
.@{fa-css-prefix}-rotate-90 { .fa-icon-rotate(90deg, 1); }
источник
Это отлично работает
<i class="fa fa-power-off text-gray" style="transform: rotate(90deg);"></i>
источник