XF 2.1 Material design icons in user banners

[InsertUserNameHere]

I'm trying to add Material icons to my banners for certain groups, this one group, called supporter has an icon, but it doesn't show up.




In Extra.less I have the following. Is this not correct?

.userBanner.userBanner--Supporter
{
&:before {
font: Material Design Icons;
Content: "\F88E";
padding-right: 4px;
}
}

 

[OUTL4W]

try

.userBanner.userBanner--Supporter: before{
font-family: "Material Design Icons";
Content: "\F88E";
padding-right: 4px;
}

but with a lil extra css...you could simply show the icon...then when hover/tap will show the user group. Works on mobile too...

 

[InsertUserNameHere]

Hi, thanks for that edit. Now it just comes out as plain text.

 

[OUTL4W]

\f88e I believe references font awesome instead of material design icons. Try instead:

.userBanner.userBanner--Supporter: before{
font-family: 'Font Awesome 5 Pro';
Content: "\f88e";
padding-right: 4px;
}

 

[Mouth]

but with a lil extra css...you could simply show the icon...then when hover/tap will show the user group. Works on mobile too...

Looks great, could you share the full CSS for that?

 

[Dermot]

Looks great, could you share the full CSS for that?

Looks something like..

.admin{background-color:red;color:#fff;font-size:0px;border-radius:50%}
.admin:hover{font-family:"Roboto";font-weight:bold;font-size:12px;padding:1px 1px 1px 1px;border-radius:2px;-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out}
.admin:before{content:'\f0e3';font-family:'Font Awesome 5 Pro';text-align:center;font-size:14px;padding:1px;font-weight:bold}

@media (min-width:650px){.memberHeader-banners.userBanner{display:inline-block;margin-right:2px;margin-bottom:5px;-webkit-box-shadow:3px 3px 3px 0px rgba(0,0,0,0.75) !important;-moz-box-shadow:3px 3px 3px 0px rgba(0,0,0,0.75) !important;box-shadow:3px 3px 3px 0px rgba(0,0,0,0.75) !important}}
@media (min-width:650px){.message-userBanner.userBanner{display:inline-grid;margin-right:2px;margin-bottom:5px;-webkit-box-shadow:3px 3px 3px 0px rgba(0,0,0,0.75);-moz-box-shadow:3px 3px 3px 0px rgba(0,0,0,0.75);box-shadow:3px 3px 3px 0px rgba(0,0,0,0.75)}}

Could be wrong and missed something though