Font-Awesome Free 5 Pusdeo not working in FireFox

Question

I have been trying to update my font-awesome from 4 to 5 and have run into an issue with the Psuedo defnition and FireFox.

I am linking the style sheet /css/all.min.css.

The CSS:

ul.nav-main li.nav-parent > a:after {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f107';
    color: #abb4be;
    position: absolute;
    right: 0;
    top: 0;
    padding: 14px 25px;
}

Now, struggling for a couple hours I find that it is working on Chrome but not FireFox. I use the console in FireFox to look at the code and CSS and all the CSS definitions are there. I uncheck a random definition and POOF the icons show up.

This doesn't seem to affect any icons using <i class="fas circle"></i> method.

How can I get this to be working in FireFox? :\