字体真棒：双色调只出现一半的时间

Question

我有 Font Awesome Pro 许可证。大多数图标都显示出来了，没问题，你可以在这里看到：https://ruthannereid.com

具体来说，我在菜单中使用双色调图书图标（屏幕截图）：https://i.imgur.com/n3xoiDR.jpg

我想要同样的图标（截图）：https://i.imgur.com/8jXfyAQ.jpg

奇怪的是，当我在 CSS 中添加 font-family: "Font Awesome 5 Duotone" 时，图标会严重中断（截图）：https://i.imgur.com/GUK4yIq.jpg

我希望得到一些帮助。我不知道我是否需要做一个 PHP 技巧或什么，但我愿意尝试任何类型的代码（希望是 CSS）。

P。 S. 我尝试手动将“fa”和“fad”CSS 规范添加到 site::before 图标，但没有解决这个问题。

当前 CSS：

.error404 .site-inner::before,
.page .site-inner::before,
.single .site-inner::before {
content: "\f5db" !important;
    font-family: "Font Awesome 5 Pro" !important;
        font-weight: 900 !important;
    background: none !important;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
   font-size: 80px;
    color: var(--fa-primary-color,inherit);
    opacity: 1;
    opacity: var(--fa-primary-opacity,1);
}

Answer 1

当使用 unicode 方法而不是类名方法时，会有一些 gothchas，我不确定您想要哪种方式工作。如果您使用的是 Font Awesome 5 Pro 字体而不是 Font Awesome 5 Duotone 字体，您需要确保指定主要和次要 unicode。目前您只看到一半的图标，因为您只指定了图标的主要层。

如果您查看书籍页面，您会看到第二个 unicode 为 10f5db，我已在下面的屏幕截图中突出显示：

要同时显示第二层，您可以在原始 :before 代码旁边添加以下 :after 代码

.error404 .site-inner::after,
.page .site-inner::after,
.single .site-inner::after{
    content: "\10f5db" !important;
    font-family: "Font Awesome 5 Pro" !important;
    font-weight: 900 !important;
    background: none !important;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    font-size: 80px;
    color: var(--fa-primary-color,#fff);
    opacity: 1;
    opacity: var(--fa-primary-opacity,1);
}

我没有测试过这个解决方案，因为我们的 Pro 帐户在白名单上没有 SO，但我相信它应该可以工作。如果没有，请大声告诉我，我会在我们列入白名单的域中为您测试它。

如果您使用的是 Font Awesome 5 Duotone 字体，那么您可以指定 --fa-secondary-color 以及 --fa-primary-color。