XF 2.3 Font awesome icons 2.3

[laurent68]

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

// add icon to category id=4

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

// add duotone icon to category id=4

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

// add solid icon to category id=4

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

// add light icon to category id=4

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

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​

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

Also see:

Node icons with image (BassMan)
Icons in visitor menu (BassMan)
Thread prefix icons (BassMan)
XF 2.3 - Boosting performance in XenForo 2.3 (Chris D)

 

XF 2.3  Add New threads to What's new (Widget/Page node)

XF 2.3  Icone Code for Fontawesome

[adrin]

Good tips

 

[DANY60]

merci, j'aime

 

[Pokschubin]

Si nous sommes, par exemple, dans xf2.2 label label--red fal fa-downloadlabel label--red fal fa-download comment ça se passera dansxf2.3?

 

[laurent68]

Si nous sommes, par exemple, dans xf2.2 label label--red fal fa-downloadlabel label--red fal fa-download comment ça se passera dansxf2.3?

Le label label--red fal fa-download c'est la nom que tu as donner a ton prefix, tu dois juste le remettre dans extra.less

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