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

[XFdownloadStore]

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


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
• Replace the default node icon
• Adding icon to thread prefix
• Icons in Navigation
• Adding icons to templates
• Adding a category node icon
• In template extra.less

Change id number to suit

// add icon to category id=4

.block--category.block--category4 .block-header:before

{

     .m-faContent(@fa-var-sparkles);

}

Duotone

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

Solid

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

Light

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

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

.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

.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

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

After the text

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

Both before and after

.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

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

Icon after Nav title

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

2 Icon as navigation title instead of text, also for phrases.

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
<xf:fa icon="fa-sparkles" aria-hidden="true"/>

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

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

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

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

Styling with color size, margin etc.
<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"/>