XF 2.3 Font awesome icons 2.3 - categories, nodes, prefixes, phrases, templates etc...

Introduction​

(Skip the intro and go straight to the examples)

There are two main situations where you might use font awesome (or other ) icons.

1 Pseudo elements (before &/or after text)​

In this case you specify via CSS code that an icon appears before or after some text, e.g. a node title, prefix, or navigation item. This is usually done by adding some CSS code to the extra.less template.

For css pseudo elements (icon before/after text) use this syntax for code in extra.less

.m-faContent(@fa-var-icon-name); = regular

.m-faContent(@fa-var-duotone-icon-name); =duotone

.m-faContent(@fa-var-solid-icon-name); = solid

.m-faContent(@fa-var-light-icon-name); = light

This when you just show an icon in a template or html. You use this syntax:

<xf:fa icon="fa-icon-name" aria-hidden="true">

2 Directly in a template​


This when you just show an icon in a template or html. You use this syntax:

<xf:fa icon="fa-icon-name" aria-hidden="true">

See below for some specific examples
Adding a category node icon
In template extra.less

Change id number to suit
CSS: 
// add icon to category id=4

.block--category.block--category4 .block-header:before
{
     .m-faContent(@fa-var-sparkles);
}

Duotone
CSS: 
.block--category.block--category4 .block-header:before
{
      .m-faContent(@fa-var-duotone-sparkles);
}

Solid
CSS: 
.block--category.block--category4 .block-header:before
{
      .m-faContent(@fa-var-solid-sparkles);
}

Light
CSS: 
.block--category.block--category4 .block-header:before
{
      .m-faContent(@fa-var-light-sparkles);
}

NB: You can add other CSS styling e.g. color, font-size, margins etc.
CSS: 
// add big red icon to category id=4

.block--category.block--category4 .block-header:before
{
      .m-faContent(@fa-var-sparkles);
      color:red;
      font-size:36px;
}

Replace the default node icon​

(as above can be regular, solid, light, or duotone)

To replace default icon, add to template extra.less:
CSS: 
.node .node-icon i
{
    &:before
    {
        .m-faContent(@fa-var-coffee-pot);
        width: 100%;
    }
    svg
    {
        display: none;
    }
}

Note that the second part (svg...) removes the default xenForo icon.


Replace individual node icon​

(note that you do not need the svg to be removed if already done so as above for all nodes)

Change id number to suit
CSS: 
.node.node--id8 .node-icon i
{
    &::before
    {
        .m-faContent(@fa-var-bullhorn);
    }
        
     svg
    {
        display: none;
    }
    
}

Adding icon to thread prefix​

e.g. for the light green prefix (in extra.less template):

In front of the text​

CSS: 
.label.label--lightGreen:before
{
.m-faContent(@fa-var-flower-tulip); }

After the text​

CSS: 
.label.label--lightGreen:after {
        .m-faContent(@fa-var-flower-daffodil);}

Both before and after​

CSS: 
.label.label--lightGreen {
 
    &:before {
        .m-faContent(@fa-var-flower-tulip);
 
    }
    &:after {
        .m-faContent(@fa-var-flower-daffodil);
 
    }
}

Icons in Navigation​

1 Add an icon to the text​


First find the navigation id. This is the text in the top field of the navigation settings in your Admin Control Panel.

Icon before Nav title​

e.g. for the Forums tab (navigation id = forums)

Add this to extra.less
CSS: 
[data-nav-id="forums"]:before
{
    .m-faContent(@fa-var-comments);
    margin-right:5px
}

Icon after Nav title​

CSS: 
[data-nav-id="forums"]:after
{
     .m-faContent(@fa-var-comments);
     margin-left:5px;
}

2 Icon as navigation title instead of text​


Navigation items are based on phrases so for existing (default xenforo) nav items you need to find the phrase. You can find all the phrases by searching for the title in Admin Control Panel > Appearance > Search Phrases. All navigation phrases start with nav. so they are quite easy to find even when there are several similar phrases. e.g. Forums is the phrase nav.forums. You just change the phrase using this syntax:

{icon:far::icon-name}

e.g.

Regular
{icon:far::sparkles}

Solid
{icon:fas::sparkles}

Duotone
{icon:fad::sparkles}

For a coloured icon use a span with inline style:

<span style="color:yellow">{icon:far::sparkles}</span>

For custom navigation items you can add the same code directly into the navigation settings in the Title field.

Adding icons to templates​

Add this code where you want icons to appear in a xenforo template or advertisement. You can use it purely as an icon or within a link.

Regular
HTML: 
<xf:fa icon="fa-sparkles" aria-hidden="true"/>

Solid (fas)
HTML: 
<xf:fa icon="fas fa-sparkles" aria-hidden="true"/>

Duotone (fad)
HTML: 
<xf:fa icon="fad fa-sparkles" aria-hidden="true"/>

Light (fat)
HTML: 
<xf:fa icon="fal fa-sparkles" aria-hidden="true"/>

Icons can be a link:
HTML: 
<a href="https://example.com/page"><xf:fa icon="fa-sparkles" aria-hidden="true"/></a>

Styling with color size, margin etc.
HTML: 
<xf:fa style="color:orange;font-size:22px;margin-left:5px;" icon="fad fa-palette" aria-hidden="true" />

Note that as well as inline CSS (as above style="...") you can alternatively define a class to use in your CSS (in template extra.less)
<xf:fa class="your-class" icon="fad fa-sparkles" aria-hidden="true"/>

Also see:

Node icons with image (BassMan)
Icons in visitor menu (BassMan)
Thread prefix icons (BassMan)
https://xenforo.com/community/threads/boosting-performance-in-xenforo-2-3.216767/#post-1648280 (Chris D)
 
Click to expand...
You must log in or register to reply here.
Back
Top