Font Awesome: Duotone only appearing half the time

Question

I have a Font Awesome Pro license. Most of the icons show up, no problem, as you can see here: https://ruthannereid.com

Specifically, I use the Duotone books icon in my menu (screenshot): https://i.imgur.com/n3xoiDR.jpg

I want that same icon here (screenshot): https://i.imgur.com/8jXfyAQ.jpg

Weirdly, when I add font-family: "Font Awesome 5 Duotone" in the CSS, the icon breaks spectacularly (screenshot): https://i.imgur.com/GUK4yIq.jpg

I would love some help on this. I don't know if I need to do a PHP trick or what, but I'm willing to try any kind of code (hopefully CSS).

P. S. I've tried to add the "fa" and "fad" CSS specifications to the site::before icon manually, but it didn't fix this.

Current 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);
}

Mike Poole Mike Poole · Accepted Answer · 2019-10-25T06:49:07

When using the unicode approach rather than the class name approach there are a few gothchas and I am not sure which way you want to work. If you are using the Font Awesome 5 Pro font rather than the Font Awesome 5 Duotone font you need to make sure you specify the primary and the secondary unicodes. At the moment you are only seeing half the icon because you have only specified the primary layer of the icon.

If you take a look at the books page you will see there is a second unicode of 10f5db which I have highlighted in the screenshot below:

To also display the secondary layer you can add the following :after code alongside your original :before code

.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);
}

I have not tested this solution because our Pro account does not have SO on the whitelist but am confident it should work. If it does not then please give me a shout and I will test it on one of our whitelisted domains for you.

If you are using the Font Awesome 5 Duotone font then you can specify the --fa-secondary-color as well as the --fa-primary-color.

Font Awesome: Duotone only appearing half the time

1 Answers