หมุนไอคอนแบบอักษรที่ยอดเยี่ยมแบบคงที่

ฉันต้องการหมุนไอคอนแบบอักษรที่น่ากลัวแบบคงที่ 45 องศา มันบอกในเว็บไซต์ว่า:

ในการหมุนและพลิกไอคอนโดยพลการให้ใช้คลาส fa-rot- * และ fa-flip- *

อย่างไรก็ตามการทำ

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

ไม่ทำงานในขณะที่แทนที่fa-rotate-45ด้วยfa-rotate-90do นี่หมายความว่าในความเป็นจริงพวกเขาไม่สามารถหมุนโดยพลการ?

ก่อน 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:

คุณสามารถใช้สิ่งที่เรียกว่า“ Power Transforms” ตัวอย่าง:

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

คุณต้องเพิ่ม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:

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