Yazı tipine uygun simgeleri statik olarak döndürme

Harika yazı tipi simgelerimi statik olarak 45 derece döndürmek istiyorum. Sitede şöyle yazıyor:

Simgeleri keyfi olarak döndürmek ve çevirmek için fa-rotate- * ve fa-flip- * sınıflarını kullanın.

Ancak yapmak

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

çalışıyor fa-rotate-45ile değiştirirken fa-rotate-90çalışmaz. Bu, aslında keyfi olarak dönemeyecekleri anlamına mı geliyor?

FontAwesome 5'ten önce:

Standart bildirimler yalnızca .fa-rotate-90, .fa-rotate-180ve içerir .fa-rotate-270. Bununla birlikte, kolayca kendinizinkini oluşturabilirsiniz:

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

FontAwesome 5 ile:

"Güç Dönüşümleri" denen şeyi kullanabilirsiniz. Misal:

<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-transformDeğeri rotate-ve istediğiniz dönüşü derece olarak içeren niteliği eklemeniz gerekir .

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

Başka birinin bu soruya rastlaması ve onu burada istemesi durumunda, kullandığım SASS karışımı.

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

Yeni Font-Müthiş v5 vardır Güç Dönüşümü

Sen özellik ekleyerek herhangi simgeyi döndürebilirsiniz data-fa-transformsimgesine

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

İşte bir keman

Daha fazla bilgi için, şuna göz atın : Font-Awesome5 Power Tranforms

45 derece döndürmek istiyorsanız, CSS dönüştürme özelliğini kullanabilirsiniz:

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

Eğer kullanırsanız Az doğrudan aşağıdaki mixin kullanabilirsiniz:

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

Bu mükemmel çalışıyor

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