XF 2.1 Material design icons in user banners

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.

supporter.webp


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

.userBanner.userBanner--Supporter
{
&:before {
font: Material Design Icons;
Content: "\F88E";
padding-right: 4px;
}
}
 
try
Code:
.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...
usergroup.gif
 
Last edited:
\f88e I believe references font awesome instead of material design icons. Try instead:

Code:
.userBanner.userBanner--Supporter: before{
font-family: 'Font Awesome 5 Pro';
Content: "\f88e";
padding-right: 4px;
}
 
Looks great, could you share the full CSS for that?

Looks something like..

CSS:
.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
 
Back
Top Bottom