Xoay tĩnh các biểu tượng phông chữ tuyệt vời

Tôi muốn xoay tĩnh các biểu tượng phông chữ tuyệt vời của mình 45 độ. Nó nói trên trang web rằng:

Để xoay và lật các biểu tượng một cách tùy ý, hãy sử dụng các lớp fa-Rot- * và fa-flip- *.

Tuy nhiên, làm

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

không hoạt động, trong khi thay thế fa-rotate-45bằng fa-rotate-90không. Điều này có nghĩa là chúng trên thực tế không thể xoay chuyển một cách tùy tiện?

Trước FontAwesome 5:

Các khai báo chuẩn chỉ chứa .fa-rotate-90, .fa-rotate-180và .fa-rotate-270. Tuy nhiên, bạn có thể dễ dàng tạo của riêng mình:

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

Với FontAwesome 5:

Bạn có thể sử dụng cái được gọi là "Biến đổi điện". Thí dụ:

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

Bạn cần thêm data-fa-transformthuộc tính với giá trị rotate-và vòng quay mong muốn của bạn theo độ.

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

Trong trường hợp ai đó tình cờ gặp câu hỏi này và muốn nó ở đây là SASS mixin tôi sử dụng.

@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 mới có Power Transforms

Bạn có thể xoay bất kỳ biểu tượng nào bằng cách thêm thuộc tính data-fa-transformvào biểu tượng

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

Đây là trò đùa

Để biết thêm thông tin, hãy xem phần này: Font-Awesome5 Power Tranforms

Nếu bạn muốn xoay 45 độ, bạn có thể sử dụng thuộc tính biến đổi CSS:

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

Nếu bạn sử dụng Ít hơn, bạn có thể sử dụng trực tiếp hỗn hợp sau:

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

Điều này hoạt động hoàn hảo

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