discussion Guide XenForo How to Add Icons to Your XenForo User Info (Postbit)

[SecureOptimize]

Want to give your XenForo forum a clean, modern look? That user info area on the side of every post (often called the "postbit") is the perfect place for a small but professional upgrade.
Adding icons 🎨 for "Messages," "Location," and "Website" makes your forum look polished and easier to read. This guide will show you how to do it in two simple steps.

🖌️ Step 1: Add Icons in the message_macros Template​

First, we need to tell XenForo which icons to display. We'll do this by editing your theme's message_macros template.

1. Go to your XenForo Admin Control Panel (ACP).
2. Navigate to Appearance > Templates.
3. Search for message_macros and open it.

Inside this template, you'll find the code that displays user details. It will look something like this:

{{ phrase('messages') }}
{{ phrase('solutions') }}
{{ phrase('reaction_score') }}
{{ phrase('points') }}
{{ phrase('age') }}
{{ phrase('location') }}
{{ phrase('website') }}

To add an icon, we simply insert a Font Awesome icon tag right before the text. XenForo has Font Awesome built-in, so this is super easy.

Here’s an example:

Let's say you want to add a "comment" icon next to 'Messages'. You would change this line:

{{ phrase('messages') }}

...to this (notice the <i> tag):

<dt><i class="far fa-comment-dots"></i> {{ phrase('messages') }}</dt>

You can repeat this for any line! Just find an icon you like from the Font Awesome library, get its HTML code (like <i class="fas fa-map-marker-alt"></i> for location), and place it before the {{ phrase('...') }} tag.

💅Step 2: (Optional) Add Spacing with extra.less​

After adding your icons, you might notice everything looks a little... cramped. 😥 Let's add some "breathing room" to make it look clean.
The best place for custom style changes is your extra.less template.

1. Go back to Appearance > Templates.
2. Search for extra.less and open it.
3. Paste the following code at the very bottom of the file:

.message-userExtras {
    .pairs.pairs--justified {
        >dt {
            padding: 5px 0;
        }
    }
}

This simple CSS snippet adds 5px of padding (space) above and below each item, making your new icons and text look perfectly spaced.

 

[SecureOptimize]

Anyone with a problem can write