Changing Folder Icons

KokoroArchive

Info


Created
1 year, 5 months ago
Creator
KokoroArchive
Favorites
1101

Profile


Originally I asked the question on how to change folder icons.
Then the very helpful Avistella posted this response so full credit to them for telling me this!
I just wanted to post this so people may find it easier :D

Folder Icons in question:

unknown.png

1. On desktop, right-click on the folder which icon you want to change. Then, select "Inspect" from the dropdown menu.

unknown.png

2. In the window that pops up that has a bunch of code on it, look for a id="folder-XXX" where "XXX" is a bunch of numbers.

unknown.png

Copy this ID ("folder-XXX") and then paste it where it says ID_HERE in the following CSS code. Be sure to keep the # at the beginning:

#ID_HERE i.fa.fa-folder::before {
  content:'\UNICODE_HERE';
}

3. Then, go to the Font Awesome site and search for the icon you want to use. In this example, I'll use heart. When you select your icon, there should be a string of letters and/ or numbers near the top-right corner. This is the unicode. For heart, this unicode is "f004". Click it to copy it.

unknown.png

4. Go to the code from Step 2. Paste the unicode you just copied into where it says UNICODE_HERE. Be sure to keep the \ at the beginning and keep it inside the quotation marks.

5. Your code should then look like the following:

#folder-1036305 i.fa.fa-folder::before {
  content:'\f004';
}

which should give you the following appearance:

unknown.png

Keep in mind that you will have to do this for each individual folder if you want to use different icons for each different folders. Otherwise, if you want to use the same icon for all folders, use the following code instead:

.characters-folders i.fa::before {
  content:'\UNICODE_HERE';
}

If using the above code, you can skip steps 1 and 2, and just go straight to Step 3.