XF 2.1 How to add Font Awesome before a text via CSS

SyTry

Well-known member
Hello,

I'm currently updating my add-on to add Font Awesome icons in the Member View, but for now I use a lots of template modification.. I want to change it for a simple template modification to the EXTRA.less template.

Here is the add-on : https://xenforo.com/community/resources/sc-member-view-font-awesome.5950/

So I started to change my code to only use CSS and style properties like this :
Code:
/*Member View - Font Awesome*/
.menu-linkRow {
    &:before {
        .m-faBase();
        padding-right: 3px;
    }
    &[href*="spam-cleaner"]:before { .m-faContent(@fa-var-user); }
    &[href*="warn"]:before { .m-faContent(@fa-var-user); }
    &[href*="warnings"]:before { .m-faContent(@fa-var-user); }
    &[href*="user-ips"]:before { .m-faContent(@fa-var-user); }
    &[href*="shared-ips"]:before { .m-faContent(@fa-var-user); }
    &[href*="ban"]:before { .m-faContent(@fa-var-user); }
    &[href*="edit"]:before { .m-faContent(@fa-var-user); }
}

Working (moderator tools) :
Screenshot_2.png

My problem is the following :
How to add an icon in the visitor panel before Messages, Reactions, etc. ? I can't figure out how to do it .. :unsure:

Do we have a methode like &[phrase=warn]:before { .m-faContent(@fa-var-user); } ? :ROFLMAO:

Regards, SyTry
 

mcatze

Well-known member
How to add an icon in the visitor panel before Messages, Reactions, etc. ? I can't figure out how to do it .. :unsure:
Which position do you mean?
For messages, e.g.
Less:
.actionBar-action
{
    &:before {margin-right:5px;}
    &--report:before {.m-faContent(@fa-var-bell);}
    &--edit:before {.m-faContent(@fa-var-pencil);}
    &--delete:before {.m-faContent(@fa-var-eraser);}
    &--spam:before {.m-faContent(@fa-var-flag);}
    &--ip:before {.m-faContent(@fa-var-search);}
    &--warn:before {.m-faContent(@fa-var-exclamation-triangle);}
    &--history:before {.m-faContent(@fa-var-history);}
}
 

mcatze

Well-known member
You could do something like this, but there is no anchor for the special <dt>-tag like message or reactions. So you have to build something with TMS.
Less:
.memberHeader-stats
{
    .pairs.pairs--rows > dt
    {
        &:before {
            .m-faBase();
            .m-faContent(@fa-var-bell);
            margin-right:5px;
        }
    }
}

Screenshot 2020-04-18 16.36.04.png
 

SyTry

Well-known member
You could do something like this, but there is no anchor for the special <dt>-tag like message or reactions. So you have to build something with TMS.
Less:
.memberHeader-stats
{
    .pairs.pairs--rows > dt
    {
        &:before {
            .m-faBase();
            .m-faContent(@fa-var-bell);
            margin-right:5px;
        }
    }
}

View attachment 222857
Ah yes this is what I need. Thank you I will try this out ! (y)
 
Top