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);
= lightThis 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
Replace the default node icon
Adding icon to thread prefix
Icons in Navigation
Adding icons to templates
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)
xenforo.com (Chris D)