XF 2.1 Duotone icons

[SHARESES]

I'am now use xenforo 2.1.5,
i'am don't upgrade duotone icon,
how do i do it? https://prnt.sc/ptp1j0

Screenshot

Captured with Lightshot

prnt.sc

Screenshot

Captured with Lightshot

prnt.sc

 

[Russ]

You could use CSS like this in the template extra.less

.node-body .node-icon i
{
    font-family: 'Font Awesome 5 Duotone';
    font-style: normal;
    font-weight: 900;
    position: relative;
    &:before
    {
        position: absolute;
        font-family: inherit;
        font-weight: inherit;
        color: xf-intensify(@xf-paletteAccent1, 15%);
        content: "\f086";
        .node--link & { content: "\f0c1"; }
        .node--page & { content: "\f15c"; }
    }
    &:after
    {
        color: xf-intensify(@xf-paletteAccent1, 5%);
        content: "\10f086";
        .node--link & { content: "\10f0c1"; }
        .node--page & { content: "\10f15c"; }
    }
}

Result:


You can grab the Unicode from the Duotone icon page: https://fontawesome.com/icons/file-alt?style=duotone (primary/secondary unicode):



Can replace:

color: xf-intensify(@xf-paletteAccent1, 15%); and: color: xf-intensify(@xf-paletteAccent1, 5%);

with your own color of course:

color: rgb(73, 80, 87);

 

[SHARESES]

You could use CSS like this in the template extra.less

.node-body .node-icon i
{
    font-family: 'Font Awesome 5 Duotone';
    font-style: normal;
    font-weight: 900;
    position: relative;
    &:before
    {
        position: absolute;
        font-family: inherit;
        font-weight: inherit;
        color: xf-intensify(@xf-paletteAccent1, 15%);
        content: "\f086";
        .node--link & { content: "\f0c1"; }
        .node--page & { content: "\f15c"; }
    }
    &:after
    {
        color: xf-intensify(@xf-paletteAccent1, 5%);
        content: "\10f086";
        .node--link & { content: "\10f0c1"; }
        .node--page & { content: "\10f15c"; }
    }
}

Result:
View attachment 213275

Unicode'u Duotone simge sayfasından alabilirsiniz: https://fontawesome.com/icons/file-alt?style=duotone (birincil / ikincil unicode):

View attachment 213276

Değiştirebilirsiniz:

renk: xf-yoğunlaştırır (@ xf-paletteAccent1,% 15); ve: renk: xf-yoğunlaştırır (@ xf-paletteAccent1,% 5);

kendi renginizle elbette:

renk: rgb (73, 80, 87);
[/ALINTI]

Thank you bro

 

[SHARESES]

@Russ Mobile https://prnt.sc/ptymo8

 

[Russ]

Definitely works on the stock style and my styles:



You might have other CSS conflicting with it.

 

[SHARESES]

Definitely works on the stock style and my styles:
View attachment 213284


You might have other CSS conflicting with it.

no, I just added these codes in the new theme don't have a code to fix for mobile?

my extra.less template content

.node-body .node-icon i
{
font-family: 'Font Awesome 5 Duotone';
font-style: normal;
font-weight: 900;
position: relative;
&:before
{
position: absolute;
font-family: inherit;
font-weight: inherit;
color: rgba(87, 137, 156, 50%);
content: "\f086";
.node--forum.node--id10 & { content: "\f0a1"; }
.node--forum.node--id11 & { content: "\f0c1"; }
.node--forum.node--id88 & { content: "\f086"; }
.node--forum.node--id92 & { content: "\f15c"; }
.node--forum.node--id105 & { content: "\f086"; }
.node--link & { content: "\f0c1"; }
.node--page & { content: "\f15c"; }
}
&:after
{
color: xf-intensify(@xf-paletteAccent1, 10%);
content: "\10f086";
.node--forum.node--id10 & { content: "\10f0a1"; }
.node--forum.node--id11 & { content: "\10f0c1"; }
.node--forum.node--id88 & { content: "\10f086"; }
.node--forum.node--id92 & { content: "\10f15c"; }
.node--forum.node--id105 & { content: "\10f086"; }
.node--link & { content: "\10f0c1"; }
.node--page & { content: "\10f15c"; }
}
}

How do I change the icon of sub-forums?