"Refurbish" XenForo Forum 2.3 with Bootstrap Icons and custom SVG

Font Awesome is a great tool, but it has become too popular and sometimes not flexible enough. If you want your forum to have a unique, modern and sharper look, it's time to learn about two powerful alternative technologies: the Bootstrap Icons library and SVG vector images.

Refurbish​

SVG (Scalable Vector Graphics) is a vector image format, which means your icon will always be sharp no matter the size. More importantly, you can easily change their colors using CSS. This article will show you step by step how to integrate Bootstrap Icons and how to use SVG to replace the default node icons, bringing a breath of fresh air to the forum interface.

Integrate Bootstrap Icons library

Bootstrap Icons is a free, open source icon library with more than 2000 icons designed in a modern style. The integration is extremely simple.

Step 1: Get the CDN link

Visit the Bootstrap Icons homepage (https://icons.getbootstrap.com/) and find Install/CDN. Copy Card <link> they provide. It shall take the following form:
HTML:
Expand Collapse Copy 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

Step 2: Insert into XenForo Template

  1. Access AdminCP > Appearance > Style you are using > Templates.
  2. Find and open templates PAGE_CONTAINER.
  3. Tagging <link> you just copied it right above the card </head>.
  4. Save.

Step 3: Use Icon

Now you can use any icon in the library.
  1. Go back to the Bootstrap Icons homepage, find an icon you like (for example: chat-left-dots-fill).
  2. Copy its HTML code, e.g. <i class="bi bi-chat-left-dots-fill"></i>.
  3. You can paste this code anywhere that supports HTML, like in Notices, HTML Widgets, or create custom BB Code.

Replace Node Icons with SVG images

This is the "money-eating" part of the trick, helping you replace your column's faint image icons with sharp and color-changing SVG icons.

Step 1: Prepare your SVG code

  1. Find icons: Access quality SVG libraries such as Tabler Icons, Phosphor Icons, or the Bootstrap Icons page itself (they also provide SVG files).
  2. Get code: Select an icon you like and download the file .svg its. Open this file with a text editor (like Notepad++ or VS Code) and copy the entire code inside (starting with <svg...> and end with </svg>).

Step 2: Encode SVG and write CSS

  1. SVG encryption: Access an online tool like URL Encoder for SVG. . Paste your entire SVG code in and copy the encrypted results. The results will be very long and start with data:image/svg+xml,....
  2. Writing CSS:
    • Access AdminCP > Appearance > Style you are using > Templates and create a new template in your style, name it _custom_icons.less.
    • Paste the following CSS code into the newly created template
CSS:
Expand Collapse Copy 
// Replace the icon for Node with ID 2
.node--id2 .node-icon i {
// Hide the default XenForo icon
display: none;
}

.node--id2 .node-icon::before {
content: '';
display: inline-block;
width: 36px; // Keep the default size
height: 36px; // or change it as you like

// This is the color of the icon you want
background-color: rgb(25, 118, 210);

// Paste the encoded SVG here
-webkit-mask: url("PASTE_ENCODERED_SVG_HERE") no-repeat center;
mask: url("PASTE_ENCODERED_SVG_HERE") no-repeat center;
}

Note:
  • Replace .node--id2 equal the ID of the node you want to change. You can find this ID in the URL when editing the node in AdminCP.
  • Changes background-color become the color you want.
  • Paste your encrypted SVG string in the correct place in url("...").

Step 3: Import CSS template

For the above CSS code to take effect, you need to "call" it.
  1. Find and open templates core.less.
  2. Add the following line at the end of the template:
    @import "_custom_icons.less";
  3. Save and check the results outside the forum.

Advanced: Change Icon color when hovering

The power of SVG is here. You just need to add a few lines of CSS to the file _custom_icons.less to create effects.
CSS:
Expand Collapse Copy 
// Add hover effect for Node ID 2 icon
.node--id2:hover .node-icon::before {
background-color: @xf-linkColor; // Automatically get the theme's link color
}

Conclusion

By combining the Bootstrap Icons library and the power of SVG, you have a powerful set of tools to customize the forum interface. Icons are now not only beautiful, modern, and sharp, but can also change colors flexibly according to each theme or user interaction. This is a small trick but has huge visual effects, helping your community stand out from the crowd.