XF 1.4 Using Font awesome in usergroup styling?

[Calmcacil]

I was wondering if there was any way to use font awesome icons when doing, i.e. putting an icon infront of the names of the various usergroups, i know i can do it with images and such but I was hoping there was a way to do it per group.

 

[TJA]

I was wondering if there was any way to use font awesome icons when doing, i.e. putting an icon infront of the names of the various usergroups, i know i can do it with images and such but I was hoping there was a way to do it per group.

EXTRA.css

.style3:before {
    color: #ff0000;
    content: "\f132";
    font-family: FontAwesome;
    padding-right: 2px;
}

 

[TJA]

To find your usergroup number

 

[Calmcacil]

Thanks, that seems to work, although padding seems to make zero difference when i change it.

 

[TJA]

Thanks, that seems to work, although padding seems to make zero difference when i change it.

Try

padding-right: 2px !important;

 

[Calmcacil]

it actually adds the padding after the username, isntead of after the icon.

 

[TJA]

it actually adds the padding after the username, isntead of after the icon.

No it doesn't this is with padding-right 10px

 

[Calmcacil]

Yeah i figgured out it was ngx_pagespeed caching stuff and making it weird i got it working. Next on my list is trying to make it show me Gender: Fa-Icon, which could end up being... interesting.

 

[TJA]

Yeah i figgured out it was ngx_pagespeed caching stuff and making it weird i got it working. Next on my list is trying to make it show me Gender: Fa-Icon, which could end up being... interesting.

message_user_info template, find:

<xen:if is="@messageShowGender AND {$user.gender}">
                    <dl class="pairsJustified">
                        <dt>{xen:phrase gender}:</dt>
                        <dd itemprop="gender"><xen:if is="{$user.gender} == 'male'">{xen:phrase male}<xen:else />{xen:phrase female}</xen:if></dd>
                    </dl>
                </xen:if>

Replace with:

<xen:if is="@messageShowGender AND {$user.gender}">
                    <dl class="pairsJustified">
                        <dt>{xen:phrase gender}:</dt>
                        <dd itemprop="gender"><xen:if is="{$user.gender} == 'male'"><i class="fa fa-mars"></i><xen:else /><i class="fa fa-venus"></i></xen:if></dd>
                    </dl>
                </xen:if>

Result:


Obviously choose the fa male/female icons of your choice