Font Awesome 5 integration [Deleted]

Thanks for the mod, Currently I place FA in the nav like so in the extra.less, is this / should this be correct? Doesn't seem to be working.

.p-navEl-link{
&:before{padding-right:5px;font-family:"Font Awesome 5 Free";content: "\f29c";}
&[data-nav-id="forums"]{&:before{content: '\f0e6';}}
&[data-nav-id="whatsNew"]{&:before{content: '\f128';}}
&[data-nav-id="members"]{&:before{content: '\f0c0';}}
 
Try this @rivacom
CSS: 
.p-navEl {
    a {
        &:before {
            font-family: "Font Awesome 5 Free";
            font-weight: 400;
            display: inline-block;
            margin-bottom: -2px;
            margin-right: 3px;
            line-height: normal;
        }
    }
    a[data-nav-id='home'] {
        &::before {
            content: "\f015";
        }
    }
    a[data-nav-id='forums'] {
        &::before {
            content: "\f086";
        }
    }
    a[data-nav-id='whatsNew'] {
        &::before {
            content: "\f1ea";
        }
    }
    a[data-nav-id='xfmg'] {
        &::before {
            content: "\f008";
        }
    }
    a[data-nav-id='xfrm'] {
        &::before {
            content: "\f019";
        }
    }
    a[data-nav-id='members'] {
        &::before {
            content: "\f0c0";
        }
    }
}
 
Last edited:
Still goes to the Font Awesome 4 in Xenforo, it has something to do with Font-Family: FontAwesome, I believe this points to the Version 4 and not 5.
 
rivacom said:
Still goes to the Font Awesome 4 in Xenforo, it has something to do with Font-Family: FontAwesome, I believe this points to the Version 4 and not 5.
Click to expand...
Sorry I wasn't paying attention. I adjusted the upper code.
 
Still no luck, Any icons that are from 5.x just show up as a square.
To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.
 
You must use font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands";
The trademarks belong to a "different" font
 
I cant see that you have add it:
1537280593700.webp

you must replaye this:
CSS: 
.p-navEl {
    a {
        &:before {
            font-family: "Font Awesome 5 Free";
            font-weight: 400;
            display: inline-block;
            margin-bottom: -2px;
            margin-right: 3px;
            line-height: normal;
        }
with this:
CSS: 
.p-navEl {
    a {
        &:before {
            font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands"; 
            font-weight: 400;
            display: inline-block;
            margin-bottom: -2px;
            margin-right: 3px;
            line-height: normal;
        }
then it works
1537280648300.webp
 
Sorry, For some reason one of the Style's Templates was overriding the call... Removed it and it seems to be working now! Thanks for your help!
 
Love this add-on, but I did notice one issue. The "Edit" pencil icon. <i class="fa fa-pencil" aria-hidden="true"></i> does not show up where you see edit. When I disabled the add-on, the pencil returns.

2018-09-19_18-59-21.webp
 
rivacom said:
I don't believe there is fa-pencil in 5(thats free) https://fontawesome.com/icons?d=gallery&q=pencil

I think the only one you could use is <i class="fas fa-pencil-alt"></i>
Click to expand...
Edited: @rivacom I think you are correct, to a degree anyway. https://fontawesome.com/icons/pencil-alt?style=solid

Added: Okay, this is driving me nuts. It appears they have added "pencil" only in the PRO version, but only offers "pencil-alt" in the FREE version. So the question is, where do we go from here.

1,341 Free Icons
2,637 Pro Icons
 
Last edited:
Okay, I found a quick fix. I altered the template named "font_awesome_5.css" After locating the template, I ran a search for "pencil-alt," and then changed it to plain ole "pencil". All works fine now. I hope that helps someone.
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom