XF 2.1 Add FA icons to Categories?

[gogo]

I searched a bit on the Internet and found the following code to be added to extra.less that's supposed to work.

.node.node--forum.node--id1 i:before{content:'\f5d0';}

where 1 is the node number of the first category.

However, no icons appears.

What's the proper codes then?

 

[Mian Shahid]

Try to change " instead of ' before and after icon ID

 

[Mian Shahid]

You may also need to add read or unread command in this code if above not solved your problem
Your code should be like that
.node--forum.node--id127.node--unread .node-icon i:before { content: "\f3a5"; } .node--forum.node--id127.node--read .node-icon i:before { content: "\f3a5"; }

 

[kick]

Can be done using less and the grayscale property

 

[kick]

.m-nodeIcons(@node-id; @icon; @faType: false) {
    .node--id@{node-id} {
        .node-icon i {
            &:before {
                & when (@faType = Brands) {
                    .m-faBase('Brands');
                }

                .node--forum&,
                .node--category& {
                    content: "\@{icon}";
                    color: @xf-nodeIconReadColor;
                    
                    .node--unread& {
                        content: "\@{icon}";
                        color: @xf-nodeIconUnreadColor;
                    }
                }

                .node--page& {
                    content: "\@{icon}";
                    color: @xf-nodeIconUnreadColor;
                }

                .node--link& {
                    content: "\@{icon}";
                    color: @xf-nodeIconUnreadColor;
                }
            }
        }
    }
}
.m-nodeIcons(2, f3a5);
.m-nodeIcons(3, f3a5);

You can use it. Result:

 

[gogo]

Can be done using less and the grayscale property

I don't have my computer to test it yet. But does it work on categories, i.e. 'General', in your case?

//Tested. Not working on Category titles.

I need to add icons before Categories:

 

[gogo]

You may also need to add read or unread command in this code if above not solved your problem
Your code should be like that
.node--forum.node--id127.node--unread .node-icon i:before { content: "\f3a5"; } .node--forum.node--id127.node--read .node-icon i:before { content: "\f3a5"; }

Unfortunately this only works for forums but not categories.

 

[Mian Shahid]

Unfortunately this only works for forums but not categories.

for categories, you should follow this

Colorful Categories.

This simple CSS will change you NODE styling to become a colorful per category base, you may use one copy of provided CSS for one category, which including necessary code for sub-node also (code included in ITD Colored Categories.css). Also...

xenforo.com

 

[gogo]

Thanks. That helps.

 

[kick]

.m-categoryIcon (@categoryid, @icon, @fa-type: false)
{
    .block {
        &--category.block--category@{categoryid} {
            .block-header {
                 a:before {
                     & when (@fa-type = false) {
                         .m-faBase();
                     }
                     & when (@fa-type = Brands) {
                         .m-faBase("Brands");
                     }
                     margin-right: 5px;
                     content: "\@{icon}";
                }
            }
        }
    }
}
.m-categoryIcon(1, f042);

you can use this code

 

[Sunka]

You can use svg images.
I am using this code in extra.less
Just change path to your image and number for category

.block.block--category.block--category505 .block-header
{
        background-image: url('folder/example.svg');
        background-repeat: no-repeat;
        background-attachment: scroll;
        background-position: left center;
        background-clip: border-box;
        background-origin: padding-box;
        background-size: 45px;
}

 

[kick]

Well, if you need an image and replace the section, then you can resort to what is described in the topic.

XF 2.1 - Logo in Node Category?

I thought I would update this post to solved and thanks again for all the help. Here is the code that I used to put the image just on one forum category node. Everything in red is what you change. If you go through this thread you will find info the info to find the ID you need for the code...

xenforo.com

 

[gogo]

Finally I used the following codes:

.block.block--category.block--category1  .block-header:before {
    .m-faBase();
    content: '\f599';
    padding-right: 5px;
}

Please let me know if this is outdated or there's a better version. Thanks!