为分层图标自定义 FontAwesome

Question

请注意，此问题与上一个问题不同。 这与分层图标有关。 另一个与双色调图标有关。

我有两层 512 x 512 px

然后，我有我的自定义图标声明：

var faEnvelope = {
  prefix: 'fal',
  iconName: 'envelope',
  icon: [
    512,
    512,
    [],
    'e003',
    'M464 0H48C21.5 0 0 21.5 0 48V336C0 362.5 21.5 384 48 384H464C490.5 384 512 362.5 512 336V48C512 21.5 490.5 0 464 0ZM48 32H464C472.8 32 480 39.2 480 48V89.4C458.1 107.9 426.8 133.4 329.4 210.7C312.5 224.1 279.2 256.4 256 256C232.8 256.4 199.4 224.1 182.6 210.7C85.2 133.4 53.9 107.9 32 89.4V48C32 39.2 39.2 32 48 32ZM464 352H48C39.2 352 32 344.8 32 336V131C54.8 149.7 90.8 178.6 162.7 235.7C183.2 252.1 219.4 288.2 256 288C292.4 288.3 328.3 252.5 349.3 235.7C421.2 178.6 457.2 149.7 480 131V336C480 344.8 472.8 352 464 352Z',
  ],
}

var faEnvelopeBg = {
  prefix: 'fal',
  iconName: 'envelope-bg',
  icon: [
    512,
    512,
    [],
    'e003',
    'M432 0H16C7.2 0 0 7.2 0 16V304C0 312.8 7.2 320 16 320H432C440.8 320 448 312.8 448 304V16C448 7.2 440.8 0 432 0Z',
  ],
}

最后，HTML 标记：

<span class="fa-layers fa-fw">
    <i class="' . $icon . '-bg" aria-hidden="true"></i>
    <i class="' . $icon . '" aria-hidden="true"></i>
</span>

结果，我得到两个层都从 0,0 坐标开始，就是这样，在这种情况下具有相对偏移：

如何为两层设置正确的 position？