Font Awesome 5 - 如何只旋转图标的蒙版？

Question

我有一个 fa-info，有一个 fa-comment 作为掩码：

<script src="https://use.fontawesome.com/releases/v5.14.0/js/all.js"></script>


<span class="fas fa-info fa-4x" data-fa-mask="fas fa-comment" data-fa-transform="up-1 shrink-9"></span>

它看起来像这样：

如果我使用 css 变换旋转它，它看起来像这样：

如果我使用 data-fa-transform="flip-h" 旋转它，它看起来像这样：

很有趣，对吧？嗯，没有

我只需要旋转遮罩 (fa-message)，所以 i 和第一个一样，而消息图标像第二个一样旋转。

有什么想法吗？

Answer 1

你快到了。使用flip-h同时变换：

body {
  background:pink;
}
.invert {
  transform:scaleX(-1);
}

<script  src="https://use.fontawesome.com/releases/v5.13.0/js/all.js"></script>


<span class="fas fa-info fa-4x" data-fa-mask="fas fa-comment" data-fa-transform="up-1 shrink-9"></span>

<span class="fas fa-info fa-4x invert" data-fa-mask="fas fa-comment" data-fa-transform="up-1 shrink-9 flip-h"></span>

Font Awesome 5 - 如何只旋转图标的蒙版？

Font Awesome 5 - How to rotate only the mask of an icon?

mask

css-transforms

font-awesome-5