Statycznie obracaj niesamowite ikony czcionek

Question 1

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ć?

Question 2

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

Question 3

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

Question 4

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

Question 5

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 */
}

Question 6

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

Question 7

To działa doskonale

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

Answer 1