旋转的图标

有时您需要旋转、翻转或镜像图标才能在您的项目或设计中使用。 我们已经包含了一些快速实用程序来帮助解决这个问题。

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

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

#旋转的类

#结合旋转+翻转

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

 <div class="fa-3x">
    <!-- 旋转 90 度并水平翻转的图标-->
    <span class="fa-rotate-90" style="display: inline-block;">
      <i class="fas fa-snowboarding fa-flip-horizontal"></i>
    </span>

    <!-- 水平翻转并旋转 90 度的图标-->
    <span class="fa-flip-horizontal" style="display: inline-block;">
      <i class="fas fa-snowboarding fa-rotate-90"></i>
    </span>

    <!-- 垂直翻转并旋转 270 度的图标-->
    <span class="fa-flip-vertical" style="display: inline-block;">
      <i class="fas fa-snowboarding fa-rotate-270"></i>
    </span>

    <!-- 旋转 270 度并垂直翻转的图标-->
    <span class="fa-rotate-270" style="display: inline-block;">
      <i class="fas fa-snowboarding fa-flip-vertical"></i>
    </span>

    <!-- 在两个轴上翻转并任意旋转 120 度的图标-->
    <span class="fa-flip-both" style="display: inline-block;">
      <i class="fas fa-snowboarding fa-rotate-by" style="--fa-rotate-angle: 120deg;"></i>
    </span>

    <!-- 任意旋转 20 度并在两个轴上翻转的图标-->
    <span class="fa-rotate-by" style="display: inline-block; --fa-rotate-angle: 20deg;">
      <i class="fas fa-snowboarding fa-flip-both"></i>
    </span>
  </div>