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


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

Active member
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:

OUTL4W

Active member
\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;
}
 

Dermot

Active member
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
 
Top