XF 2.1 Duotone icons

Russ

Well-known member
You could use CSS like this in the template extra.less

Code:
.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:
duo1.png

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

Screenshot_1.png

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

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

Code:
.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

New member
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?
 
Top