跳到内容
Font Awesome 文档
欢迎 Web Awesome，最大最好的开源 Web 组件库。
今天预订！

旋转图标

有时您需要旋转、翻转或镜像图标，才能使其在您的项目或设计中正常工作。我们提供了一些快速实用程序来帮助您实现这一目标。

要任意旋转和翻转图标，请在引用图标时使用 fa-rotate-* 和 fa-flip-* 类。

<div class="fa-3x">
  <i class="fa-solid fa-snowboarding"></i>
  <i class="fa-solid fa-snowboarding fa-rotate-90"></i>
  <i class="fa-solid fa-snowboarding fa-rotate-180"></i>
  <i class="fa-solid fa-snowboarding fa-rotate-270"></i>
  <i class="fa-solid fa-snowboarding fa-flip-horizontal"></i>
  <i class="fa-solid fa-snowboarding fa-flip-vertical"></i>
  <i class="fa-solid fa-snowboarding fa-flip-both"></i>
</div>

旋转类

类详细信息
fa-rotate-90将图标旋转 90°
fa-rotate-180将图标旋转 180°
fa-rotate-270将图标旋转 270°
fa-flip-horizontal水平镜像图标
fa-flip-vertical垂直镜像图标
fa-flip-both垂直和水平镜像图标
fa-rotate-by按特定度数旋转图标 - 需要设置一个伴随的 有效 内联值来为 --fa-rotate-angle。

自定义旋转

我们添加了一个 CSS 自定义属性 来使旋转图标更可定制和更具体。将 .fa-rotate-by 类添加到图标，并定义您自己的角度。

CSS 自定义属性详细信息接受的值
--fa-rotate-angle设置 .fa-rotate-by 的旋转角度任何有效的 CSS transform 旋转 值

<div class="fa-3x">
  <i class="fa-solid fa-snowboarding"></i>


  <i class="fa-solid fa-snowboarding fa-rotate-by" style="--fa-rotate-angle: 45deg;" ></i>
  <i class="fa-solid fa-snowboarding fa-rotate-by" style="--fa-rotate-angle: -45deg;" ></i>


  <i class="fa-solid fa-snowboarding fa-rotate-by" style="--fa-rotate-angle: 19deg;" ></i>
  <i class="fa-solid fa-snowboarding fa-rotate-by" style="--fa-rotate-angle: 80deg;" ></i>


  <i class="fa-solid fa-snowboarding fa-rotate-by" style="--fa-rotate-angle: 0.25deg;" ></i>
  <i class="fa-solid fa-snowboarding fa-rotate-by" style="--fa-rotate-angle: -0.25deg;" ></i>
</div>

组合旋转 + 翻转

我们的旋转实用程序利用了 CSS 的 transform 属性。您可以旋转和翻转图标，但您需要使用一些额外的标记（例如 <span> 元素）来实现这一点，因为在一个元素上放置多个旋转/翻转类只会相互覆盖。在父元素上应用一个旋转实用程序类，在嵌套的图标上应用另一个类。

<div class="fa-3x">
  <!-- A icon that's rotated 90 degress and flipped horizontally -->
  <span class="fa-rotate-90" style="display: inline-block;">
    <i class="fa-solid fa-snowboarding fa-flip-horizontal"></i>
  </span>


  <!-- A icon that's flipped horizontally and rotated 90 degrees  -->
  <span class="fa-flip-horizontal" style="display: inline-block;">
    <i class="fa-solid fa-snowboarding fa-rotate-90"></i>
  </span>


  <!-- A icon that's flipped vertically and rotated 270 degress  -->
  <span class="fa-flip-vertical" style="display: inline-block;">
    <i class="fa-solid fa-snowboarding fa-rotate-270"></i>
  </span>


  <!-- A icon that's rotated 270 degress and flipped vertically -->
  <span class="fa-rotate-270" style="display: inline-block;">
    <i class="fa-solid fa-snowboarding fa-flip-vertical"></i>
  </span>


  <!-- A icon that's flipped on both axes and arbitrarily rotated 120 degress  -->
  <span class="fa-flip-both" style="display: inline-block;">
    <i class="fa-solid fa-snowboarding fa-rotate-by" style="--fa-rotate-angle: 120deg;"></i>
  </span>


  <!-- A icon that's arbitrarily rotated 20 degres and flipped on both axes  -->
  <span class="fa-rotate-by" style="display: inline-block; --fa-rotate-angle: 20deg;">
    <i class="fa-solid fa-snowboarding fa-flip-both"></i>
  </span>
</div>