字体棒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和transform：

​

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>

​