• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.4 Using Font awesome in usergroup styling?

#1
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

Well-known member
#2
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
Code:
.style3:before {
    color: #ff0000;
    content: "\f132";
    font-family: FontAwesome;
    padding-right: 2px;
}
upload_2015-6-2_23-22-18.png
 
#8
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

Well-known member
#9
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:
Code:
<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:
Code:
<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:
upload_2015-6-3_0-11-27.png

Obviously choose the fa male/female icons of your choice