How to Add Font Awesome Icons via CSS in XenForo 2.3+
If you’ve recently updated to XenForo 2.3, you probably noticed your old content: "\f007"; CSS code stopped working. Your icons are either invisible or showing up as blank squares.
This is because XF 2.3 now "optimizes" icons—if you don't call them the "new way," the system simply refuses to load them. Here is how to fix it using extra.less.
1. The Basic Template
To add an icon to a specific element (like a user banner, a prefix, or a link), use this structure in your extra.less template:
2. Finding the "Icon Name"
You no longer need the Unicode strings (like \f3ed). Instead:
3. Fixing "Invisible" Icons (Weights)
XF 2.3 is very picky about "weights." If your icon isn't appearing, you might need to tell XF exactly which "style" of icon to use inside the .m-faBase() brackets:
4. Pro-Tip: The "XenForo 2.3 Secret"
In the old days, you could just write CSS and it worked. In 2.3, when you save your extra.less template, XenForo scans your code. Using the .m-faContent line tells XenForo: "Hey, I'm using this icon on the front end, make sure you actually include it in the site's font file."
If you use the old content: "\f..." method, the scanner skips it, and the icon stays invisible.
Note: I used AI (Gemini) to help generate this resource.
Note 2: If the above CSS fails, for whatever reason, to do the trick, try using this LESS version instead:
Note 3: In both CSS & LESS codes, the 'before' specifies positioning the FA icon before the main content of the element you apply these codes to. If instead you want to position the icon after the main content, simply change the word before to after and change padding-right to padding-left.
If you’ve recently updated to XenForo 2.3, you probably noticed your old content: "\f007"; CSS code stopped working. Your icons are either invisible or showing up as blank squares.
This is because XF 2.3 now "optimizes" icons—if you don't call them the "new way," the system simply refuses to load them. Here is how to fix it using extra.less.
1. The Basic Template
To add an icon to a specific element (like a user banner, a prefix, or a link), use this structure in your extra.less template:
CSS:
.YOUR-CLASS-NAME-HERE::before {
.m-faBase(); // Tells XF to load the Font Awesome font
display: inline-block; // Ensures the icon has proper spacing
.m-faContent("@{fa-var-ICON-NAME}"); // The name of your icon
padding-right: 5px; // Space between icon and text
}2. Finding the "Icon Name"
You no longer need the Unicode strings (like \f3ed). Instead:
1. Go to the Font Awesome 6 Library.
2. Find an icon you like (e.g., house, shield-halved, or envelope).
3. Take that name and put it in the code after @fa-var-.
•Example: .m-faContent("@{fa-var-house}");
3. Fixing "Invisible" Icons (Weights)
XF 2.3 is very picky about "weights." If your icon isn't appearing, you might need to tell XF exactly which "style" of icon to use inside the .m-faBase() brackets:
Standard/Solid Icons: .m-faBase(@faWeight-solid);
Brand Icons (Facebook, Discord, etc.): .m-faBase(@faWeight-brands);
Regular/Thin Icons: .m-faBase(@faWeight-regular);
4. Pro-Tip: The "XenForo 2.3 Secret"
In the old days, you could just write CSS and it worked. In 2.3, when you save your extra.less template, XenForo scans your code. Using the .m-faContent line tells XenForo: "Hey, I'm using this icon on the front end, make sure you actually include it in the site's font file."
If you use the old content: "\f..." method, the scanner skips it, and the icon stays invisible.
Note: I used AI (Gemini) to help generate this resource.
Note 2: If the above CSS fails, for whatever reason, to do the trick, try using this LESS version instead:
Less:
.YOUR-CLASS-NAME-HERE {
&::before {
.m-faBase();
display: inline-block;
.m-faContent("@{fa-var-ICON-NAME}");
padding-right: 5px;
}
}
//I tested this code (on user group banners) via extra.less and it definitely does work, at least here. (Example image, bottom of this post)Note 3: In both CSS & LESS codes, the 'before' specifies positioning the FA icon before the main content of the element you apply these codes to. If instead you want to position the icon after the main content, simply change the word before to after and change padding-right to padding-left.
