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

Discussion in 'Styling and Customization Questions' started by Calmcacil, Jun 2, 2015.

  1. Calmcacil

    Calmcacil Member

    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.
     
  2. TJA

    TJA Well-Known Member

    EXTRA.css
    Code:
    .style3:before {
        color: #ff0000;
        content: "\f132";
        font-family: FontAwesome;
        padding-right: 2px;
    }
    upload_2015-6-2_23-22-18.png
     
  3. TJA

    TJA Well-Known Member

    To find your usergroup number

    upload_2015-6-2_23-27-42.png
     
  4. Calmcacil

    Calmcacil Member

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

    TJA Well-Known Member

    Try

    padding-right: 2px !important;
     
  6. Calmcacil

    Calmcacil Member

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

    TJA Well-Known Member

    No it doesn't this is with padding-right 10px
    upload_2015-6-2_23-47-29.png
     
  8. Calmcacil

    Calmcacil Member

    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.
     
  9. TJA

    TJA Well-Known Member

    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
     

Share This Page