XF 2.3 Converting FA icons

Sysnative · Mar 30, 2024

Today in 2.2 I have:

Template:

HTML:

<xf:if is="$xf.visitor.user_id"><div id="sidebar_button"><a href="#"></a></div></xf:if>

and in the .less template:

CSS:

#sidebar_button::before{
    content: '\f324';
    font-family: "Font Awesome 5 Pro";
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: solid;
    margin-right: 8px;
    font-size: 18pt;
}

Are there instructions on converting this over to the new FA Manager for XF2.3? I tried replacing the .less with @fa-chevron-double-right;, but it seemed to break the full .less template.

Appreciate any help!

Jeremy P · Mar 30, 2024

To retain the LESS approach:

Less:

#sidebar_button::before
{
    .m-faBase();
    .m-faContent(@fa-var-chevron-double-right);
}

Though I'd recommend just using <xf:fa> directly where possible:

HTML:

<xf:if is="$xf.visitor.user_id">
    <div id="sidebar_button">
        <xf:fa icon="fa-chevron-double-right" /><a href="#"></a>
    </div>
</xf:if>

Both approaches should work on XF 2.2 as well as XF 2.3.

Mr Lucky · Mar 30, 2024

Jeremy P said:
Both approaches should work on XF 2.2 as well as XF 2.3.

The LESS approach is not working for me in XF 2.2, just shows a square:

Code:

[data-nav-id="info"]
{
    .m-faBefore(@fa-var-info-circle);
}

mcatze · Mar 30, 2024

You should try this:

Less:

[data-nav-id="info"]
{
    .m-faBefore(@fa-var-info-circle, 1em);
    .m-faBase();
}

Mr Lucky · Mar 30, 2024

Thanks that works in both 2.2 and 2.3

But needs a bit of space between icon and text - do you know how to do that? Thanks

Mr Lucky · Mar 30, 2024

Ah, adding a space before text works, but I'm not sure that's the best way

Code:

&nbsp;About

mcatze · Mar 30, 2024

It is better to use margin-right: 5px;

Less:

[data-nav-id="info"]
{
    .m-faBefore(@fa-var-info-circle, 1em);
    .m-faBase();
    margin-right: 5px;
}

Sysnative · Mar 30, 2024

@Jeremy P - thanks for the new version!

Is there a syntax guide for this anywhere? I'm struggling to work out how these are meant to be pulled in. E.g. for this one:

CSS:

.p-body-sidebar{

        .block-minorHeader{
           
            .m-faBefore(@fa-var-ellipsis);}

Previously:

CSS:

.block-minorHeader::before{
            content: '\f141';
            font-family: "Font Awesome 5 Pro";
            display: inline-block;
            transform: translate(0,0);
            font-weight: normal;
            text-rendering: auto;
            font-size: inherit;
            margin-right: 6px;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            opacity: 0.7;
        }

The specific icon on the FA site is:

Code:

<i class="fa-regular fa-ellipsis"></i>

Sysnative · Mar 30, 2024

Sysnative said:
The specific icon on the FA site is:
[CODE]<i class="fa-regular fa-ellipsis"></i>[/CODE]
[/QUOTE]

Ah I fixed this - I'd strayed into the v6 documentation by mistake, and was missing an -h on the end of ellipsis.

Mr Lucky · Mar 30, 2024

mcatze said:
It is better to use margin-right: 5px;

Less:

[data-nav-id="info"] { .m-faBefore(@fa-var-info-circle, 1em); .m-faBase(); margin-right: 5px; }

Problem is that adds space after the text, not between the icon and the text. margin-left don't work either as it adds space before the icon

mcatze · Mar 30, 2024

In that was you should try this variant:

Less:

[data-nav-id="info"]:before
{
    .m-faBase();
    .m-faContent(@fa-var-info-circle);
    margin-right: 5px;
}

Btw.. this is the part from my extra.less

Less:

/*** FontAwesome Icons in NavTab & AccountMenu ***/
.p-navEl-link,
.menu-linkRow,
.offCanvasMenu a
{                             
    &:before
    {
        .m-faBase();
        //.m-faContent(@fa-var-question-square);
        margin-right:5px;
        display:inline-block;
        text-align:center;
    }             
    
    &[data-nav-id='home']:before {.m-faContent(@fa-var-home);}
    &[data-nav-id='forums']:before {.m-faContent(@fa-var-comments);}
    &[data-nav-id='whatsNew']:before {.m-faContent(@fa-var-question);}
    &[data-nav-id='members']:before {.m-faContent(@fa-var-users);}
    &[data-nav-id='xfrm']:before {.m-faContent(@fa-var-download);}
    &[data-nav-id='xfmg']:before {.m-faContent(@fa-var-camera);}
}

Bildschirmfoto 2024-03-30 um 16.35.05.webp

mcatze · Mar 30, 2024

Sysnative said:
Is there a syntax guide for this anywhere? I'm struggling to work out how these are meant to be pulled in. E.g. for this one:

You can check & read the other templates like setup.less or setup_fa.less (XF2.2) There're some examples for using the syntax.

Davyc · Mar 30, 2024

I'd like to know how to change the forum icons to a font awesome icon. I could do this in previous XF versions but trying to do this in 2.3 escapes me, so if anyone knows how I'd love you to share it with me.

mcatze · Mar 30, 2024

Sysnative said:
Is there a syntax guide for this anywhere? I'm struggling to work out how these are meant to be pulled in. E.g. for this one:

Btw.. I did this for https://www.xendach.de like this way:

Less:

.p-body-sidebar
{
    [data-widget-key="forum_overview_members_online"] .block-minorHeader:before {
        .m-faBase();
        .m-faContent(@fa-var-users);
        display: inline-block;
        margin-right: 5px;
    }
    [data-widget-key="lastMemberOnline"] .block-minorHeader:before {
        .m-faBase();
        .m-faContent(@fa-var-user-clock);
        display: inline-block;
        margin-right: 5px;
    }
    [data-widget-key="forum_overview_forum_statistics"] .block-minorHeader:before {
        .m-faBase();
        .m-faContent(@fa-var-chart-line);
        display: inline-block;
        margin-right: 5px;
    }
    [data-widget-key="forum_overview_new_posts"] .block-minorHeader:before {
        .m-faBase();
        .m-faContent(@fa-var-comments);
        display: inline-block;
        margin-right: 5px;
    }
    [data-widget-key="xfrm_forum_overview_new_resources"] .block-minorHeader:before {
        .m-faBase();
        .m-faContent(@fa-var-download);
        display: inline-block;
        margin-right: 5px;
    }
    [data-widget-key="forum_overview_share_page"] .block-minorHeader:before {
        .m-faBase();
        .m-faContent(@fa-var-share);
        display: inline-block;
        margin-right: 5px;
    }
    [data-widget-key="tagCloud"] .block-minorHeader:before {
        .m-faBase();
        .m-faContent(@fa-var-tags);
        display: inline-block;
        margin-right: 5px;
    }
}

Kevin · Jul 8, 2024

Jeremy P said:
To retain the LESS approach:

This may be answered already somewhere, but, honestly, I've searched and can't find it.

For the variable names, do all of the XF variable names follow 1:1 with the FA names at https://fontawesome.com/v5/search so we can always assume that the variable name to use is @fa-var-+{FA variable name}?

Jeremy P · Jul 8, 2024

Yeah.

Kevin · Jul 8, 2024

Jeremy P said:
Yeah.

Thank you for confirming.

As I convert more sites over to 2.3 I am finding all of the little changes in spots that I've forgotten about/missed. As part of that, thank you to whichever of you guys updated the inline description that appears below the phrase text box to now include the {icon::name} usage; after I realized how/where the icon should've even been coming from, seeing that new description in there made it a few second task to update the value.

silverSl!DE · Sep 4, 2024

Sysnative said:
Today in 2.2 I have:

Template:

HTML:

<xf:if is="$xf.visitor.user_id"><div id="sidebar_button"><a href="#"></a></div></xf:if>

and in the .less template:

CSS:

#sidebar_button::before{ content: '\f324'; font-family: "Font Awesome 5 Pro"; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: solid; margin-right: 8px; font-size: 18pt; }

Are there instructions on converting this over to the new FA Manager for XF2.3? I tried replacing the .less with @fa-chevron-double-right;, but it seemed to break the font-family: "Font Awesome 5 Pro";full .less template.

Appreciate any help!

I had the same thing.
and while @mcatze s solution might be the better one (Thx a lot! // vielen Dank dafür!), I discovered, by accident, that all I had to change was the

Less:

font-family: "Font Awesome 5 Pro";

to

Less:

font-family: FontAwesome;

So my Icon set for navbar and buttons below posts look in extra.less like this

Less:

/*FONT AWESOME ICONS UNTER BEITRÄGEN*/
.actionBar-action--edit:before,
.actionBar-action--report:before,
.actionBar-action--ip:before,
.actionBar-action--delete:before,
.actionBar-action--spam:before,
.actionBar-action--warn:before,
.actionBar-action--history:before
{
    display: inline-block;
    font-family: FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    margin-right: 5px;
}
.actionBar-action--edit:before{content: "\f040";}
.actionBar-action--report:before{content: "\f071";}
.actionBar-action--ip:before{content: "\f002";}
.actionBar-action--delete:before{content: "\f00d";}
.actionBar-action--spam:before{content: "\f024";}
.actionBar-action--warn:before{content: "\f12a";}
.actionBar-action--history:before{content: "\f1da";}

/* Menü Fontawesome */
.p-navEl-link{                           
    &:before{padding-right:5px;font-family: FontAwesome;content: "\f29c";}
    &[data-nav-id="EWRporta"]{&:before{content: "\f015";}}
    &[data-nav-id="EWRporta_whatsnaw"]{&:before{content: "\f15c";}}
    &[data-nav-id="EWRporta_newsfeed"]{&:before{content: '\f09e';}}
    &[data-nav-id="EWRporta_latest"]{&:before{content: '\f005';}}
    &[data-nav-id="EWRporta_authors"]{&:before{content: '\f2bd';}}
    &[data-nav-id="home"]{&:before{content: "\f015";}}
    &[data-nav-id="forums"]{&:before{content: '\f086';}}
    &[data-nav-id="whatsNew"]{&:before{content: '\f128';}}
    &[data-nav-id="members"]{&:before{content: '\f0c0';}}
    &[data-nav-id="xfrm"]{&:before{content: '\f019';}}
    &[data-nav-id="xfmg"]{&:before{content: '\f030';}}
    &[data-nav-id="newPosts"]{&:before{content: '\f06d';}}
    &[data-nav-id="findThreads"]{&:before{content: '\f00e';}}
    &[data-nav-id="search"]{&:before{content: '\f002';}}
    &[data-nav-id="searchForums"]{&:before{content: "\f865";}}
    &[data-nav-id="markForumsRead"]{&:before{content: '\f070';}}
    &[data-nav-id="whatsNewPosts"]{&:before{content: '\f0f6';}}
    &[data-nav-id="whatsNewProfilePosts"]{&:before{content: '\f040';}}
    &[data-nav-id="whatsNewNewsFeed"]{&:before{content: '\f09e';}}
    &[data-nav-id="latestActivity"]{&:before{content: '\f005';}}
    &[data-nav-id="xfrmLatestReviews"]{&:before{content: '\f091';}}
    &[data-nav-id="xfrmYourResources"]{&:before{content: '\f0ed';}}
    &[data-nav-id="xfrmWatched"]{&:before{content: '\f0a7';}}
    &[data-nav-id="xfrmSearchResources"]{&:before{content: '\f002';}}
    &[data-nav-id="currentVisitors"]{&:before{content: '\f234';}}
    &[data-nav-id="newProfilePosts"]{&:before{content: '\f040';}}
    &[data-nav-id="searchProfilePosts"]{&:before{content: '\f21b';}}
    &[data-nav-id="registeredMembers"]{&:before{content: "\f2bb";}}
    &[data-nav-id="registeredMembers"]{&:before{content: "\f2bb";}}
    &[data-nav-id="watched"]{&:before{content: "\f06e";}}
    &[data-nav-id="calendar"]{&:before{content: "\f073";}}
    &[data-nav-id="advancedSearch"]{&:before{content: "\f002";}}
}

I Kwon it's dirty/messy, but it works in 2.3 too.

I tested @mcatze s aproach, but some icons wouldnt show up... (whats new, featured content):

Less:

/*** FontAwesome Icons in NavTab & AccountMenu ***/
.p-navEl-link,
.menu-linkRow,
.offCanvasMenu a
{                           
    &:before
    {
        .m-faBase();
        //.m-faContent(@fa-var-question-square);
        margin-right:5px;
        display:inline-block;
        text-align:center;
    }           
  
    &[data-nav-id='EWRporta']:before {.m-faContent(@fa-var-home);}
    &[data-nav-id='EWRporta_whatsnaw']:before {.m-faContent(@fa-var-file-text);}
    &[data-nav-id='EWRporta_newsfeed']:before {.m-faContent(@fa-var-rss);}
    &[data-nav-id='EWRporta_latest']:before {.m-faContent(@fa-var-star);}
    &[data-nav-id='EWRporta_authors']:before {.m-faContent(@fa-var-feather);}
    &[data-nav-id='home']:before {.m-faContent(@fa-var-home);}
    &[data-nav-id='forums']:before {.m-faContent(@fa-var-comments);}
    &[data-nav-id='whatsNew']:before {.m-faContent(@fa-var-question);}
    &[data-nav-id='members']:before {.m-faContent(@fa-var-users);}
    &[data-nav-id='xfrm']:before {.m-faContent(@fa-var-download);}
    &[data-nav-id='xfmg']:before {.m-faContent(@fa-var-camera);}
    &[data-nav-id='newPosts']:before {.m-faContent(@fa-var-fire);}
    &[data-nav-id='findThreads']:before {.m-faContent(@fa-var-search-plus);}
    &[data-nav-id='search']:before {.m-faContent(@fa-var-search);}
    &[data-nav-id='searchForums']:before {.m-faContent(@fa-var-file-search);}
    &[data-nav-id='markForumsRead']:before {.m-faContent(@fa-var-eye-slash);}
    &[data-nav-id='whatsNewPosts']:before {.m-faContent(@fa-var-file-text-o);}
    &[data-nav-id='whatsNewProfilePosts']:before {.m-faContent(@fa-var-pencil);}
    &[data-nav-id='whatsNewNewsFeed']:before {.m-faContent(@fa-var-rss);}
    &[data-nav-id='latestActivity']:before {.m-faContent(@fa-var-star);}
    &[data-nav-id='xfrmLatestReviews']:before {.m-faContent(@fa-var-trophy);}
    &[data-nav-id='xfrmYourResources']:before {.m-faContent(@fa-var-cloud-download);}
    &[data-nav-id='xfrmWatched']:before {.m-faContent(@fa-var-hand-o-down);}
    &[data-nav-id='xfrmSearchResources']:before {.m-faContent(@fa-var-search);}
    &[data-nav-id='currentVisitors']:before {.m-faContent(@fa-var-user-plus);}
    &[data-nav-id='newProfilePosts']:before {.m-faContent(@fa-var-pencil);}
    &[data-nav-id='searchProfilePosts']:before {.m-faContent(@fa-var-user-secret);}
    &[data-nav-id='registeredMembers']:before {.m-faContent(@fa-var-address-card);}
    &[data-nav-id='registeredMembers']:before {.m-faContent(@fa-var-address-card);}
    &[data-nav-id='watched']:before {.m-faContent(@fa-var-eye);}
    &[data-nav-id='calendar']:before {.m-faContent(@fa-var-calendar);}
    &[data-nav-id='advancedSearch']:before {.m-faContent(@fa-var-search);}
}

mcatze · Sep 4, 2024

silverSl!DE said:
I Kwon it's dirty/messy, but it works in 2.3 too.
I tested @mcatze s aproach, but some icons wouldnt show up... (whats new, featured content):

You have to check the data-nav-id, cause some changed in XF2.3
I use this in XF2.3...

Less:

/*** FontAwesome Icons in NavTab & AccountMenu ***/
.p-navEl-link,
.menu-linkRow,
.offCanvasMenu a
{                             
    &:before
    {
        .m-faBase();
        //.m-faContent(@fa-var-question-square);
        margin-right:5px;
        display:inline-block;
        text-align:center;
    }             
    
    &[data-nav-id='home']:before {.m-faContent(@fa-var-home);}
    &[data-nav-id='forums']:before {.m-faContent(@fa-var-comments);}
    &[data-nav-id='whatsNew']:before {.m-faContent(@fa-var-question);}
    &[data-nav-id='members']:before {.m-faContent(@fa-var-users);}
    &[data-nav-id='xfrm']:before {.m-faContent(@fa-var-download);}
    &[data-nav-id='xfmg']:before {.m-faContent(@fa-var-camera);}
    
    /* Forums Subnav*/
    &[data-nav-id='newPosts']:before {.m-faContent(@fa-var-search-plus);}
    &[data-nav-id='findThreads']:before {.m-faContent(@fa-var-search);}
    &[data-nav-id='yourThreads']:before {.m-faContent(@fa-var-user);}
    &[data-nav-id='contributedThreads']:before {.m-faContent(@fa-var-comments-alt);}
    &[data-nav-id='unansweredThreads']:before {.m-faContent(@fa-var-comments);}
    &[data-nav-id='watched']:before {.m-faContent(@fa-var-eye);}
    &[data-nav-id='watchedThreads']:before {.m-faContent(@fa-var-comments);}
    &[data-nav-id='watchedForums']:before {.m-faContent(@fa-var-comments-alt);}
    &[data-nav-id='searchForums']:before {.m-faContent(@fa-var-search);}
    &[data-nav-id='markForumsRead']:before {.m-faContent(@fa-var-eye-slash);}
    &[data-nav-id='help']:before {.m-faContent(@fa-var-info);}
    
    /* WhatsNew Subnav */
    &[data-nav-id='featured']:before {.m-faContent(@fa-var-paper-plane);}
    &[data-nav-id='whatsNewPosts']:before {.m-faContent(@fa-var-pencil);}
    &[data-nav-id='whatsNewProfilePosts']:before {.m-faContent(@fa-var-rss);}
    &[data-nav-id='whatsNewNewsFeed']:before {.m-faContent(@fa-var-star);}
    &[data-nav-id='xfmgWhatsNewNewMedia']:before {.m-faContent(@fa-var-images);}
    &[data-nav-id='xfmgWhatsNewMediaComments']:before {.m-faContent(@fa-var-comments);}
    &[data-nav-id='xfrmNewResources']:before {.m-faContent(@fa-var-download);}
    &[data-nav-id='latestActivity']:before {.m-faContent(@fa-var-trophy);}
    
    /* XFMG Subnav */
    &[data-nav-id='xfmgNewMedia']:before {.m-faContent(@fa-var-images);}
    &[data-nav-id='xfmgNewComments']:before {.m-faContent(@fa-var-comments);}
    &[data-nav-id='xfmgAddMedia']:before {.m-faContent(@fa-var-plus-square);}
    &[data-nav-id='xfmgYourContent']:before {.m-faContent(@fa-var-user);}
    &[data-nav-id='xfmgYourMedia']:before {.m-faContent(@fa-var-images);}
    &[data-nav-id='xfmgYourAlbums']:before {.m-faContent(@fa-var-th);}
    &[data-nav-id='xfmgWatchedContent']:before {.m-faContent(@fa-var-eye);}
    &[data-nav-id='xfmgWatchedMedia']:before {.m-faContent(@fa-var-images);}
    &[data-nav-id='xfmgWatchedAlbums']:before {.m-faContent(@fa-var-th);}
    &[data-nav-id='xfmgWatchedCategories']:before {.m-faContent(@fa-var-th-list);}
    &[data-nav-id='xfmgSearchMedia']:before {.m-faContent(@fa-var-search);}
    &[data-nav-id='xfmgMarkViewed']:before {.m-faContent(@fa-var-eye-slash);}

    /* XFRM Subnav */
    &[data-nav-id='xfrmLatestReviews']:before {.m-faContent(@fa-var-balance-scale);}
    &[data-nav-id='xfrmYourResources']:before {.m-faContent(@fa-var-user);}
    &[data-nav-id='xfrmWatched']:before {.m-faContent(@fa-var-eye);}
    &[data-nav-id='xfrmWatchedResources']:before {.m-faContent(@fa-var-download);}
    &[data-nav-id='xfrmWatchedCategories']:before {.m-faContent(@fa-var-th-large);}
    &[data-nav-id='xfrmSearchResources']:before {.m-faContent(@fa-var-search);}
    &[data-nav-id='xfa_rmmp_purchases']:before {.m-faContent(@fa-var-credit-card);}
    &[data-nav-id='xfa_rmmp_licenses']:before {.m-faContent(@fa-var-cloud-download);}
    &[data-nav-id='xfa_rmmp_dashboard']:before {.m-faContent(@fa-var-tachometer);}

    /* Members Subnav */
    &[data-nav-id='registeredMembers']:before {.m-faContent(@fa-var-user-circle);}
    &[data-nav-id='dbtech_membermap_navbar']:before {.m-faContent(@fa-var-globe);}
    &[data-nav-id='currentVisitors']:before {.m-faContent(@fa-var-user-plus);}
    &[data-nav-id='newProfilePosts']:before {.m-faContent(@fa-var-pencil);}
    &[data-nav-id='searchProfilePosts']:before {.m-faContent(@fa-var-user-secret);}
    &[data-nav-id='defaultNewsFeed']:before {.m-faContent(@fa-var-star);}
    &[data-nav-id='defaultLatestActivity']:before {.m-faContent(@fa-var-trophy);}
    
    /* Your Profile */
    &[data-nav-id='defaultYourProfile']:before {.m-faContent(@fa-var-user-circle);}
    &[data-nav-id='defaultYourAccount']:before {.m-faContent(@fa-var-cogs);}

    &[href*="/whats-new/news-feed"]:before {.m-faContent(@fa-var-newspaper);}
    &[href*="/search/member?"]:before {.m-faContent(@fa-var-comments);}
    &[href*="/profil/reactions"]:before {.m-faContent(@fa-var-thumbs-up);}
    &[href*="/profil/alerts"]:before {.m-faContent(@fa-var-bell);}
    &[href*="/profil/account-details"]:before {.m-faContent(@fa-var-cogs);}
    &[href*="/profil/security"]:before {.m-faContent(@fa-var-lock);}
    &[href*="/profil/privacy"]:before {.m-faContent(@fa-var-eye);}
    &[href*="/profil/preferences"]:before {.m-faContent(@fa-var-cog);}
    &[href*="/profil/signature"]:before {.m-faContent(@fa-var-pencil);}
    &[href*="/profil/upgrades"]:before {.m-faContent(@fa-var-star);}
    &[href*="/profil/connected-accounts"]:before {.m-faContent(@fa-var-cloud);}
    &[href*="/profil/following"]:before {.m-faContent(@fa-var-user-plus);}
    &[href*="/profil/ignored"]:before {.m-faContent(@fa-var-user-minus);}
    &[href*="/profil/xenforo-license"]:before {.m-faContent(@fa-var-star);}
    &[href*="/logout"]:before {.m-faContent(@fa-var-power-off);}
}

.actionBar-action
{
    &:before {margin-right:5px;}
    &--report:before {.m-faContent(@fa-var-bell);}
    &--edit:before {.m-faContent(@fa-var-pencil);}
    &.actionBar-action--delete:before {.m-faContent(@fa-var-eraser);}
    &.actionBar-action--spam:before {.m-faContent(@fa-var-flag);}
    &.actionBar-action--ip:before {.m-faContent(@fa-var-search);}
    &.actionBar-action--warn:before {.m-faContent(@fa-var-exclamation-triangle);}
    &.actionBar-action--history:before {.m-faContent(@fa-var-history);}
    &.actionBar-action--changeOwnerAndDate:before {.m-faContent(@fa-var-exchange);}
}

XF 2.3 Converting FA icons

Well-known member

XenForo developer

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

Well-known member

XenForo developer

Well-known member

Member

Well-known member

Similar threads

We value your privacy