XF 2.3 Converting FA icons

[Sysnative]

Today in 2.2 I have:

Template:

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

and in the .less template:

#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]

To retain the LESS approach:

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

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

<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]

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:

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

 

[mcatze]

You should try this:

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

 

[Mr Lucky]

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]

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

 About

 

[mcatze]

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

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

 

[Sysnative]

@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:

.p-body-sidebar{

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

Previously:

.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:

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

 

[Sysnative]

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]

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

[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]

In that was you should try this variant:

[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

/*** 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);}
}

 

[mcatze]

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]

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]

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:

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