XF 2.3 Please enter valid username CSS rules.

[CtrlV]

Im having problem in adding fontawesome icon after the username of every user in a group.

Based on my understanding on https://xenforo.com/community/resources/font-awesome-icons-2-3.9562/

code less should be like this

&:after{
    .m-faContent(@fa-var-icon-name);
}

but it always show error cant save.
Oops! We ran into some problems.
Please enter valid username CSS rules.

 

[Deleted member 184953]

In the CSS rule block just add a neutral rule color: inherit; (for example) to activate the username--styleID class.
Then check with the browser inspector the ID:



In my case the ID is 2, then in your extra.less template add:

.username--style2:after
{
    .m-faContent(@fa-var-icon-name);
    padding-right: 4px;
}

 

[CtrlV]

In the CSS rule block just add a neutral rule color: inherit; (for example) to activate the username--styleID class.
Then check with the browser inspector the ID:

View attachment 313084

In my case the ID is 2, then in your extra.less template add:

.username--style2:after
{
    .m-faContent(@fa-var-icon-name);
    padding-right: 4px;
}

Thanks for reply mine is style5 but whenever i save, it show this

 

[Deleted member 184953]

Thanks for reply mine is style5 but whenever i save, it show this

In my case the ID is 2, then in your extra.less template add:

Put the code in your extra.less template.

 

[CtrlV]

It might work in extra.less but i prefer putting in User Groups in Username CSS. i believe it can work on Username css.

 

[Deleted member 184953]

.m-faContent(fa-var-icon-name) won’t be a valid syntax in this CSS field. Maybe it’s a bug but it won’t be accepted, i guess because it’s a XenForo template syntax.

K

Post in thread 'FA icons on notices'

Jul 26, 2024

Notices don't support XenForo template syntax, ony HTML - the HTML widget does support XenForo template syntax.
(Yes, this is inconsistent ... you may want to check suggestions and / or post a new one)

The reason why you still see a button (but no icons) is due to browsers accepting invalid HTML (<xf:button>...</xf:button> is invalid HTML) and trying their best to render smth. useful - the tag has a class attribute so the browser applies this to the invalid tag.

You would get the same visual output with

<wtf class="button" icon="save">test</wtf>
<br>
<wtf2 icon="fas...

• Kirby

• 

 

[Kirby]

.m-faContent(fa-var-icon-name) won’t be a valid syntax in this CSS field.

This is a LESS mixin, not CSS - the username CSS field accepts only ... CSS

 

[Deleted member 184953]

That’s why. Thank you.

 

[CtrlV]

This is a LESS mixin, not CSS - the username CSS field accepts only ... CSS

Thanks for reply @Kirby How about Using CSS like:

&:after{
    font-family: fontAwesome;
    content: "\f002";
}

Something like that, does work in 2.1 but not in 2.3.

 

[Kirby]

Thanks for reply @Kirby How about Using CSS

It is not really possible to do smth. similar with 2.3 (without custom development)

The best option would be to use extra.less as was already suggested.