真棒字体5-如何仅旋转图标的蒙版？

问题描述

我有一个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 保持像第一个一样，消息图标像第二个一样旋转。 / p>

有什么想法吗？

解决方法

您快到了。使用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>