User banner icons

[creaky]

Started work on upgrading to 2.3 and can’t get the font awesome icon to work in userbanners. This is the current less code, tried a couple of things but not currently working.

.userBanner.banneradmin2:before {
background: rgba(238,238,238,0.15);
position: absolute;
justify-content: center;
display: flex;
align-items: center;
top: 0;
bottom: 0;
left: 0;
min-width: 25px;
font-size: 100%;
text-align: center;
border-radius: 3px;
font-family: 'Font Awesome 5 Pro';
font-size: inherit;
font-style: normal;
font-weight: 400;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\f521"
}

 

[Russ]

In 2.3 the Font Awesome bits have changed. You'll want code like this:

.userBanner.banneradmin2:before
{
position: absolute;
justify-content: center;
display: flex;
align-items: center;
top: 0;
bottom: 0;
left: 0;
min-width: 25px;
.m-faContent(@fa-var-crown);
}

2.3 uses the icons now as "background svg's" so you can't really have a background color easily (using :before at least)

 

[creaky]

That's almost got it. For some reason the icon is small and at the top of the banner.

This is the complete code, probably a lot that's not needed.

/* ADMIN USER BANNER */
.userBanner {
    position: relative;
    padding: 6px 10px 6px 36px;
    margin-top: 6px !important;
    border-radius: 4px;
    text-align: right
}

.userBanner.banneradmin2 {
    color: #fff;
    background: #bb47f1;
    border-color: #cd76f5;
    border-color: #8030a6;
    transition: ease-out .5s;
    background-image: linear-gradient(to bottom, rgba(187,71,241,0.2) 0%, rgba(187,71,241,0) 100%),linear-gradient(to right, rgba(187,71,241,0) 0%, rgba(187,71,241,0.1) 50%, rgba(187,71,241,0) 100%) !important;
    text-shadow: 1px 0 1px #36064d,0 1px 1px #36064d,-1px 0 1px #36064d,0 -1px 1px #36064d
}

.userBanner.banneradmin2:hover {
    box-shadow: inset 0 0 0 300px #af26ee;
    transition: ease-out .5s;
    color: #fff;
}

.userBanner.banneradmin2:before {
    position: absolute;
    justify-content: center;
    display: flex;
    align-items: center;
    top: 0;
    bottom: 0;
    left: 0;
    min-width: 25px;
    .m-faContent(@fa-var-crown);
}
/* ADMIN USER BANNER */

 

[Russ]

Try this CSS out, cleaned it up a bit:

/* ADMIN USER BANNER */
.userBanner {
    position: relative;
    padding: 6px 10px 6px 36px;
    margin-top: 6px !important;
    border-radius: 4px;
    text-align: right
}
.userBanner.banneradmin2
{
    color: #fff;
    background: #bb47f1;
    border-color: #cd76f5;
    border-color: #8030a6;
    transition: ease-out .5s;
    background-image: linear-gradient(to bottom, rgba(187,71,241,0.2) 0%, rgba(187,71,241,0) 100%),linear-gradient(to right, rgba(187,71,241,0) 0%, rgba(187,71,241,0.1) 50%, rgba(187,71,241,0) 100%) !important;
    text-shadow: 1px 0 1px #36064d,0 1px 1px #36064d,-1px 0 1px #36064d,0 -1px 1px #36064d;
    &:before
    {
        .m-faContent(@fa-var-crown);
        position: absolute;
        left: @xf-paddingMedium;
        top: 50%;
        transform: translateY(-50%);
    }
    &:hover
    {
        box-shadow: inset 0 0 0 300px #af26ee;
        transition: ease-out .5s;
        color: #fff;
    }
}


/* ADMIN USER BANNER */

 

[creaky]

Works perfectly.

Have a great Christmas.

 

[Russ]

Thank you, you too!