Change icon of specific type of file inside a specific directory

[Wanty5883]

I tried this

.directory.entry > .header > .name[data-path="FOLDER_PATH_HERE"]::before{
    content: "\f06a";
    font-family: "Octicons Regular";
}

and this

.directory > .header > .icon{
    &[data-path$=".atom/packages"]:before{
        font-family: "Octicons Regular";
        content: "\f0c4";
    }
}

So far nothing worked. I would like to change the icon of .txt or other type of files inside a specific path.

[Alhadis]

To match .txt files inside any directory that's named folder-name:

.icon[data-path*="/folder-name/"][data-name$=".txt"]::before{
    font-family: "Octicons Regular";
    content: "\f0c4";
}

To match .txt files inside a specific (absolute) path:

.icon[data-path^="/Users/john-doe/.atom/folder-name/"][data-name$=".txt"]::before{
    font-family: "Octicons Regular";
    content: "\f0c4";
}

The key difference is ^= and *= are used for matching data-path attributes. See MDN's page on attribute selectors for more info.

Note that data-name contains only the filename (foo.txt), whereas data-path contains the absolute path (/path/to/foo.txt).

[Wanty5883]

I don't what I'm missing based on the given instruction, but still it is not working.

This is what I am using for icon in styles.less

Everything above for .nut .gnut and project folder is working.

.project-root-header > .icon::before{
    content: "\f001";
    font-family: "Octicons Regular";
}
.icon[data-name$=".nut"]::before{
    font: 15px Octicons Regular;
    content: "\f0b2";
    top: 4px;
    body:not(.file-icons-colourless) &{
        color: #8f4910;
    }
}
.icon[data-name$=".gnut"]::before{
    font: 15px Octicons Regular;
    content: "\f0b2";
    top: 4px;
    body:not(.file-icons-colourless) &{
        color: #d4884a;
    }
}
.icon[data-path*="/Users/Wanty/Downloads/test/"][data-name$=".txt"]::before{
    font-family: "Octicons Regular";
    content: "\f0c4";
}

Also the folders I would like to edit are not on my C: drive. Should I add the letter drive before path ?

[Alhadis]

Which directory paths are you trying to map?

Also the folders I would like to edit are not on my C: drive. Should I add the letter drive before path ?

Ah, you're on Windows. You might need to replace the forward slashes with backslashes:

.icon[data-path*="\\Users\\Wanty\\Downloads\\test\\"][data-name$=".txt"]::before{
    font-family: "Octicons Regular";
    content: "\f0c4";
}

Putting the drive letter shouldn't be necessary because [data-path*="/foo/"] matches anything containing /foo/, including C:/foo/ and D:/foo/.

[Wanty5883]

It works on my test folder, located in my C: drive. But when I tried on my actual folders, not on C: drive. All my files edited in styles.less have this.

I tried to clear cache and reboot Atom as well

[Alhadis]

I should have clarified: only the slashes in the filepaths need to be doubled. The content property only uses 1 slash; in CSS, a backslash followed by hexadecimal expands to a character with that particular codepoint. Hence why it's necessary to use two slashes instead of one when you really do mean a backslash.

[Wanty5883]

I don't really get what I am suppose to do. Based on what you told me and what worked for my test folder in C: drive I did the same with my folders on my other drives. And all icons that are modified by styles.less look like this in the screenshot in my previous message. Those screenshot are not from styles.less but the files themselves.

 .icon[data-path*="\\000 - Modding\\Titanfall\\Titanfall 2\\Modding\\englishclient_mp_common.bsp.pak000_dir.vpk\\scripts\\weapons\\"][data-name$=".txt"]::before{
    font-family: "file-icons";
    content: "\\eb12";
 }

[Alhadis]

Change

content: "\\eb12";

to

content: "\eb12";

[Wanty5883]

Oh.. Dumb question sorry.

Now it works perfectly. Just what I had in mind and needed. Thanks a lot for your help, surprisingly fast !

[Alhadis]

Good to hear! 👍 Let me know if you run into any other issues.