Statycznie obracaj niesamowite ikony czcionek

93

Chciałbym statycznie obrócić moje niesamowite ikony o 45 stopni. Na stronie jest napisane, że:

Aby dowolnie obracać i odwracać ikony, użyj klas fa-rotate- * i fa-flip- *.

Jednak robi

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

nie działa, natomiast zastąpienie fa-rotate-45ze fa-rotate-90robi. Czy to oznacza, że w rzeczywistości nie mogą się one dowolnie zmieniać?

css rotation font-awesome

— user592419
źródło

226

Przed FontAwesome 5:

Standardowe deklaracje tylko zawierać .fa-rotate-90, .fa-rotate-180oraz .fa-rotate-270. Możesz jednak łatwo stworzyć własne:

.fa-rotate-45 {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

Z FontAwesome 5:

Możesz użyć tak zwanych „transformacji mocy”. Przykład:

<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--30"></i>

Musisz dodać data-fa-transformatrybut o wartości rotate-i żądany obrót w stopniach.

Źródło: https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms

— KittMedia
źródło

pasuje do konwencji nazewnictwa Font Awesome; ładny!

— SoEzPz

Nie zapomnij również zmienić właściwości wyświetlania ikony z „inline” na „inline-block”. Przekształcenie nie będzie działać w przypadku elementów wbudowanych. Więcej w tej dyskusji

— Oksana Romaniv

15

Na wypadek, gdyby ktoś inny natknął się na to pytanie i chciałby go tutaj znaleźć, to miks SASS, którego używam.

@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);
}

— PseudoNinja
źródło

12

Nowa wersja Font-Awesome v5 ma transformacje mocy

Możesz obrócić dowolną ikonę, dodając atrybut data-fa-transformdo ikony

<i class="fas fa-magic" data-fa-transform="rotate-45"></i>

Oto skrzypce

Aby uzyskać więcej informacji, zobacz: Tranformy mocy Font-Awesome5

— Noopur Dabhi
źródło

9

Jeśli chcesz obrócić o 45 stopni, możesz użyć właściwości transform CSS:

.fa-rotate-45 {
    -ms-transform:rotate(45deg);     /* Internet Explorer 9 */
    -webkit-transform:rotate(45deg); /* Chrome, Safari, Opera */
    transform:rotate(45deg);         /* Standard syntax */
}

— Peter Mortensen
źródło

3

Jeśli używasz Less , możesz bezpośrednio użyć następującego miksu:

.@{fa-css-prefix}-rotate-90  { .fa-icon-rotate(90deg, 1);  }

— StackHola
źródło

0

To działa doskonale

<i class="fa fa-power-off text-gray" style="transform: rotate(90deg);"></i>

— James Ace
źródło