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


92

글꼴 멋진 아이콘을 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한다. 이것은 실제로 그들이 임의로 회전 할 수 없다는 것을 의미합니까?

답변:


223

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


Font Awesome의 명명 규칙과 일치합니다. 좋은!
SoEzPz

아이콘의 표시 속성을 "inline"에서 "inline-block"으로 변경하는 것을 잊지 마십시오. 변환은 인라인 요소에서 작동하지 않습니다. 보기 토론
옥사나 Romaniv

15

다른 누군가 가이 질문을 우연히 발견하고 여기에서 원하는 경우 내가 사용하는 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);
}


9

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 */
}

3

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

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

0

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

<i class="fa fa-power-off text-gray" style="transform: rotate(90deg);"></i>
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.