Resource icon

FontAwesome Icons in Message User Info for Xenforo 2.2

Stuart Wright

Well-known member
Stuart Wright submitted a new resource:

FontAwesome Icons in Message User Info for Xenforo 2.2 - Use fontawesome icons in the user extras block of message user info

This is something I have managed to implement. It may not be the best way to achieve it, and if there is a better way, please reply to the thread and I will update it.
It works in XF 2.2, but may work in 2.x, I don't know.
It includes how to implement fontawesome icons for custom user fields. I have a custom user field represented by a car, which you can see in this screen capture.

View attachment 245997

First of all, I added some CSS to the extra.less template (if...

Read more about this resource...
 

BassMan

Well-known member
Hi Stuart,

nice TM. My approach is a bit different (maybe also not the best way to achieve it, but it works), so maybe it will help someone out.

I don't edit the HTML templates, just the extra.less template.

So, in Custom user fields I create a new one like this:
Screenshot 2021-02-09 at 12.52.37.png

In the title I actually add the HTML code:
<span class="ucf_nas_icon" data-xf-init="tooltip" data-original-title="NAS"></span><span class="ucf_nas_phrase">NAS</span>

Then this to extra.less:
Less:
/* Message user extra - user custom fields icons */
[data-template="thread_view"] .message-user, [data-template="conversation_view"] .message-user,
[data-template="thread_view_type_question"] .message-user, [data-template="thread_view_type_suggestion"] .message-user,
[data-template="thread_view_type_article"] .message-user, [data-template="thread_view_type_poll"] .message-user,
[data-template="xfrm_thread_view_type_resource"] .message-user {
    .ucf_nas_icon:before {
        .m-faBase();
        .m-faContent(@fa-var-server);
    }
    .ucf_nas_phrase {
        display: none;
    }
}

As said, not sure if this is the best approach, but didn't get any time to play with it.
 

NandorHUN

Active member
Hi Stuart,

nice TM. My approach is a bit different (maybe also not the best way to achieve it, but it works), so maybe it will help someone out.

I don't edit the HTML templates, just the extra.less template.

So, in Custom user fields I create a new one like this:
View attachment 246001

In the title I actually add the HTML code:
<span class="ucf_nas_icon" data-xf-init="tooltip" data-original-title="NAS"></span><span class="ucf_nas_phrase">NAS</span>

Then this to extra.less:
Less:
/* Message user extra - user custom fields icons */
[data-template="thread_view"] .message-user, [data-template="conversation_view"] .message-user,
[data-template="thread_view_type_question"] .message-user, [data-template="thread_view_type_suggestion"] .message-user,
[data-template="thread_view_type_article"] .message-user, [data-template="thread_view_type_poll"] .message-user,
[data-template="xfrm_thread_view_type_resource"] .message-user {
    .ucf_nas_icon:before {
        .m-faBase();
        .m-faContent(@fa-var-server);
    }
    .ucf_nas_phrase {
        display: none;
    }
}

As said, not sure if this is the best approach, but didn't get any time to play with it.
Great!

Though in the title and extra.less code what are the editable parts that needs to match to work in both the title and the extra.less code?
 

BassMan

Well-known member
And what about ones that can be added but there's no custom user field for them like location and website ?
 

NandorHUN

Active member
Wow thanks.

Kind of off topic, but do you have one for the user menu (at the right side account details, settings, reactions etc..) like on your site?
 

BassMan

Well-known member
Kind of off topic, but do you have one for the user menu (at the right side account details, settings, reactions etc..) like on your site?
Yes, but let's talk elsewhere (i.e. on customizexf.com check under DIY in Resources) about this so we don't get off-topic too much and hijack the thread.
 

NandorHUN

Active member
Hi Stuart,

nice TM. My approach is a bit different (maybe also not the best way to achieve it, but it works), so maybe it will help someone out.

I don't edit the HTML templates, just the extra.less template.

So, in Custom user fields I create a new one like this:
View attachment 246001

In the title I actually add the HTML code:
<span class="ucf_nas_icon" data-xf-init="tooltip" data-original-title="NAS"></span><span class="ucf_nas_phrase">NAS</span>

Then this to extra.less:
Less:
/* Message user extra - user custom fields icons */
[data-template="thread_view"] .message-user, [data-template="conversation_view"] .message-user,
[data-template="thread_view_type_question"] .message-user, [data-template="thread_view_type_suggestion"] .message-user,
[data-template="thread_view_type_article"] .message-user, [data-template="thread_view_type_poll"] .message-user,
[data-template="xfrm_thread_view_type_resource"] .message-user {
    .ucf_nas_icon:before {
        .m-faBase();
        .m-faContent(@fa-var-server);
    }
    .ucf_nas_phrase {
        display: none;
    }
}

As said, not sure if this is the best approach, but didn't get any time to play with it.
Thanks.

One more question: how can I put the icons to the right side from the centre? The text wont fit in one line next to the icons
 
Last edited:
Top