XF 2.1 How to add font awesome icons to custom user fields in custom_fields_macros template

[maxicep]

Hello,

I'm trying to put font awesome icons instead of text to {$fieldDefinition.title} of the custom user fields title on custom_fields_macros template. I already changed the messages, reactions text with font awesome icon easily on message_macros template. But custom fields tired me

For example; You can see that i changed the messages and reactions title as icon, but other fields are custom field so i need put the icons them instead of text.


After i open the custom_fields_macros template, i see that and here should be edit (need conditionals) I'm trying to add some conditionals but doesn't work (see the red codes)

    <xf:foreach loop="$xf.app.getCustomFields({$type}, {$group}, {$onlyInclude}, {$additionalFilters})" key="$fieldId" value="$fieldDefinition">
        <xf:if is="$fieldDefinition.hasValue({$set.{$fieldDefinition.field_id}})">
            <dl class="{$valueClass}">
                <xf:if is="$xf.post.user.Profile.custom_fields.gsmoperatoru">
                    <i class="fa fa-wifi fa-large fa-fixed-width" style="padding-left:5px;"></i>
                    <xf:else />
                <dt>{$fieldDefinition.title}</dt>
                </xf:if>
                <dd>
                    <xf:macro name="custom_field_value"
                        arg-definition="{$fieldDefinition}"
                        arg-value="{$set.{$fieldDefinition.field_id}}" />
                </dd>
            </dl>
        </xf:if>
    </xf:foreach>

So, what is the right conditional for do that? Thanks

 

[Kevin]

In your custom_fields_macros template change <dt>{$fieldDefinition.title}</dt> to something like the below. Just add as many if...elseif... conditionals you need for each of your custom fields before ending with your else being {$fieldDefinition.title} or other default.

<dt>
    <xf:if is="$fieldDefinition.title == 'Real Name'">
        <i class="fal fa-id-card"></i>
    <xf:else/>
        {$fieldDefinition.title}
    </xf:if>
</dt>

 

[maxicep]

In your custom_fields_macros template change <dt>{$fieldDefinition.title}</dt> to something like the below. Just add as many if...elseif... conditionals you need for each of your custom fields before ending with your else being {$fieldDefinition.title} or other default.

<dt>
    <xf:if is="$fieldDefinition.title == 'Real Name'">
        <i class="fal fa-id-card"></i>
    <xf:else/>
        {$fieldDefinition.title}
    </xf:if>
</dt>

Thank you, it work like a charm

 

[maxicep]

In your custom_fields_macros template change <dt>{$fieldDefinition.title}</dt> to something like the below. Just add as many if...elseif... conditionals you need for each of your custom fields before ending with your else being {$fieldDefinition.title} or other default.

<dt>
    <xf:if is="$fieldDefinition.title == 'Real Name'">
        <i class="fal fa-id-card"></i>
    <xf:else/>
        {$fieldDefinition.title}
    </xf:if>
</dt>

That effects the member_view template too of course.
Custom fields coming with icon on member_view (profile) pages.

How can i exclude that? I've tried the AND $template == 'thread_view' condition, but it doesn't work.

 

[Stuart Wright]

That effects the member_view template too of course.
Custom fields coming with icon on member_view (profile) pages.

How can i exclude that? I've tried the AND $template == 'thread_view' condition, but it doesn't work.

Just been trying to do the same thing. I got this far:

<dt>
   <xf:if is="$fieldDefinition.title=='--your custom field title--' && $xf.reply.template=='thread_view'">
      <xf:fa icon="--your font awesome icon e.g. fa-clock--" title="{{ phrase('--your phrase--') }}" />
   <xf:else />
      {$fieldDefinition.title}
   </xf:if>
</dt>

With a few tweaks, I managed to get this going ok https://xenforo.com/community/resources/fontawesome-icons-in-message-user-info-for-xenforo-2-2.8265/

 

[Deleted member 241496]

Hello,

I'm trying to put font awesome icons instead of text to {$fieldDefinition.title} of the custom user fields title on custom_fields_macros template. I already changed the messages, reactions text with font awesome icon easily on message_macros template. But custom fields tired me

For example; You can see that i changed the messages and reactions title as icon, but other fields are custom field so i need put the icons them instead of text.
View attachment 209610

After i open the custom_fields_macros template, i see that and here should be edit (need conditionals) I'm trying to add some conditionals but doesn't work (see the red codes)

    <xf:foreach loop="$xf.app.getCustomFields({$type}, {$group}, {$onlyInclude}, {$additionalFilters})" key="$fieldId" value="$fieldDefinition">
        <xf:if is="$fieldDefinition.hasValue({$set.{$fieldDefinition.field_id}})">
            <dl class="{$valueClass}">
                <xf:if is="$xf.post.user.Profile.custom_fields.gsmoperatoru">
                    <i class="fa fa-wifi fa-large fa-fixed-width" style="padding-left:5px;"></i>
                    <xf:else />
                <dt>{$fieldDefinition.title}</dt>
                </xf:if>
                <dd>
                    <xf:macro name="custom_field_value"
                        arg-definition="{$fieldDefinition}"
                        arg-value="{$set.{$fieldDefinition.field_id}}" />
                </dd>
            </dl>
        </xf:if>
    </xf:foreach>

So, what is the right conditional for do that? Thanks

Hello,

I'm trying to put font awesome icons instead of text to {$fieldDefinition.title} of the custom user fields title on custom_fields_macros template. I already changed the messages, reactions text with font awesome icon easily on message_macros template. But custom fields tired me

For example; You can see that i changed the messages and reactions title as icon, but other fields are custom field so i need put the icons them instead of text.
View attachment 209610

After i open the custom_fields_macros template, i see that and here should be edit (need conditionals) I'm trying to add some conditionals but doesn't work (see the red codes)

    <xf:foreach loop="$xf.app.getCustomFields({$type}, {$group}, {$onlyInclude}, {$additionalFilters})" key="$fieldId" value="$fieldDefinition">
        <xf:if is="$fieldDefinition.hasValue({$set.{$fieldDefinition.field_id}})">
            <dl class="{$valueClass}">
                <xf:if is="$xf.post.user.Profile.custom_fields.gsmoperatoru">
                    <i class="fa fa-wifi fa-large fa-fixed-width" style="padding-left:5px;"></i>
                    <xf:else />
                <dt>{$fieldDefinition.title}</dt>
                </xf:if>
                <dd>
                    <xf:macro name="custom_field_value"
                        arg-definition="{$fieldDefinition}"
                        arg-value="{$set.{$fieldDefinition.field_id}}" />
                </dd>
            </dl>
        </xf:if>
    </xf:foreach>

So, what is the right conditional for do that? Thanks

I'm curious, how did you replace the messages, likes, etc. text with the font awesome icons?