Putar ikon font-mengagumkan secara statis

Question 1

Saya ingin memutar ikon font-mengagumkan saya secara statis sebesar 45 derajat. Di situs dikatakan bahwa:

Untuk memutar dan membalik ikon secara sewenang-wenang, gunakan kelas fa-rotate- * dan fa-flip- *.

Namun, melakukan

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

tidak berfungsi, sedangkan mengganti fa-rotate-45dengan fa-rotate-90tidak. Apakah ini berarti mereka sebenarnya tidak bisa merotasi secara sembarangan?

Question 2

Sebelum FontAwesome 5:

Deklarasi standar hanya berisi .fa-rotate-90, .fa-rotate-180dan .fa-rotate-270. Namun Anda dapat dengan mudah membuatnya sendiri:

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

Dengan FontAwesome 5:

Anda dapat menggunakan apa yang disebut "Transformasi Daya". Contoh:

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

Anda perlu menambahkan data-fa-transformatribut dengan nilai rotate-dan rotasi yang Anda inginkan dalam derajat.

Sumber: https://fontawesome.com/how-to-use/on-the-web/styling/power-transforms

Question 3

Jika ada orang lain yang tersandung pada pertanyaan ini dan menginginkannya di sini adalah mixin SASS yang saya gunakan.

@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

Font-Awesome v5 baru memiliki Power Transforms

Anda dapat memutar ikon apa pun dengan menambahkan atribut data-fa-transformke ikon

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

Ini biola

Untuk informasi lebih lanjut, lihat ini: Font-Awesome5 Power Tranforms

Question 5

Jika Anda ingin memutar 45 derajat, Anda dapat menggunakan properti transformasi 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

Jika Anda menggunakan Less Anda dapat langsung menggunakan mixin berikut:

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

Question 7

Ini bekerja dengan sempurna

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

Answer 1