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

[SyTry]

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 :

/*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) :


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

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

Regards, SyTry

 

[mcatze]

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

Which position do you mean?
For messages, e.g.

.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]

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.

.memberHeader-stats
{
    .pairs.pairs--rows > dt
    {
        &:before {
            .m-faBase();
            .m-faContent(@fa-var-bell);
            margin-right:5px;
        }
    }
}

 

[SyTry]

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.

.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 !