[css] 글꼴 멋진 아이콘을 정적으로 회전

Program / 글쓴이

글꼴 멋진 아이콘을 45 도씩 정적으로 회전하고 싶습니다. 사이트에 다음과 같이 나와 있습니다.

아이콘을 임의로 회전하고 뒤집으려면 fa-rotate- * 및 fa-flip- * 클래스를 사용하십시오.

그러나

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

교체 반면, 작동하지 않습니다 fa-rotate-45와 함께 fa-rotate-90한다. 이것은 실제로 그들이 임의로 회전 할 수 없다는 것을 의미합니까?

답변

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 Transform이 있습니다.

아이콘에 속성 data-fa-transform을 추가하여 모든 아이콘을 회전 할 수 있습니다.

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

여기 바이올린이 있습니다

자세한 내용은 다음을 확인하십시오. Font-Awesome5 Power Tranforms

답변

45도 회전하려면 CSS transform 속성을 사용할 수 있습니다.

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

답변

당신이 사용하는 경우 더 적은을 직접 다음과 믹스 인을 사용할 수 있습니다 :

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

답변

이것은 완벽하게 작동합니다

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

답변