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...
 
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.webp

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.
 
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?
 
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?
 
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.
 
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 Bottom