FontAwesome Icons in Message User Info for Xenforo 2.2 [Deleted]

[Stuart Wright]

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]

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:


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:

/* 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]

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:

/* 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]

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?

From the above example just .ucf_nas_icon and .ucf_nas_phrase.

 

[NandorHUN]

From the above example just .ucf_nas_icon and .ucf_nas_phrase.

Thanks!

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

 

[BassMan]

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

[cXF] Icons for message user info elements (user extras)

This is a cXF Pack A Membership Add-on. Upgrade your account to cXF Pack A Membership for: 1-year access to all cXF Pack A Membership Add-ons for XenForo 2 1-year access to all cXF Premium Customizations for XenForo 2 If you got our...

xenforo.com

 

[NandorHUN]

[cXF] Icons for message user info elements (user extras)

This is a cXF Pack A Membership Add-on. Upgrade your account to cXF Pack A Membership for: 1-year access to all cXF Pack A Membership Add-ons for XenForo 2 1-year access to all cXF Premium Customizations for XenForo 2 If you got our...

xenforo.com

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]

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]

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:

/* 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

 

[BassMan]

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

We are already discussing this on another board.

 

[Deleted member 241496]

Amazing! Thank you!

 

[Stuart Wright]

This resource has been removed and is no longer available.