为分层图标自定义FontAwesome

Question

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

我有两层512 x 512像素

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

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开始的两层坐标，就是这样，在这种情况下具有相对偏移：

如何为两个图层设置正确的位置？