[Guide/Code] How to change the icons on your profile

There are many different ways to go about changing the icons on your profile. In this guide I will explain the difference between them so you can choose which one best suits your needs. As per all my guides, if anything doesn't work please let me know!! Something as small as skipping a parenthesis can completely break the code, and I tend to make a looot of typos.

Note before we start: anything between /* and */ is what we call a comment! Meaning that the computer will "skip" everything inside of it when reading the code. So you can safely paste aything inside of those tags along with the code without it breaking. Also remember that all the code is meant to go inside of <style> </style> tags!

ANOTHER note before we start, this time for those of you that are tech savvy: these methods are based on using the ::before pseudo-element. Using the content property directly on the icon we want to change (without removing it and then adding a ::before element) should display properly on most browsers. However I think that using ::before makes for a much cleaner solution when it's applicable.

Table of contents:
• Changing the "contacting" icons (first method)
• Changing the "contacting" icons (second method)
• Changing the online and notification icons
• Where to find icons

Method one: using the content property (quicker, but less customization)

This method is the most used on SpaceHey from what I've seen, but it has some issues.

/* This piece of code removes the default icons. */
.contact .icon {
display: none;
}

/* And then use one of the two following code snippets to add your icons, depending on what you want to do: */
/* If you want to change all the icons to the same image:  */
.contact .inner a:before {
content: url(your image url goes here!);
}

/* If you want to change the icons to different images: */
/* "Add to friends" */
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a::before {
content: url(your image url goes here!);
}

/* "Add to favorites" */
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a::before {
content: url(your image url goes here!);
}

/* "Send message" */
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a::before {
content: url(your image url goes here!);
}

/* "Forward to friend" */
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a::before {
content: url(your image url goes here!);
}

/* "Instant message" */
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a::before {
content: url(your image url goes here!);
}

/* "Block user" */
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a::before {
content: url(your image url goes here!);
}

/* "Add to group" */
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a::before {
content: url(your image url goes here!);
}

/* "Report user" */
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a::before {
content: url(your image url goes here!);
}

The main issue with this method is that there is no way to resize your icons (there are some workarounds, but they're not that great). This is generally not a problem when you're using the same image for all the icons, as long as it's inbetween 15x15 and 20x20 pixels in size. However, if you are picking  images from different sources they might be of different sizes, and this can make you "contacting" section look wonky. In this case you should refer to method 2.

Method 2: using the background image property (longer to set up, but more customization)

This is the method I used on my profile. It's what I recommend if you want to use bigger images resized as icons or (like in my case) images that vary in size. In this method, instead of inserting the image, we insert an empty block, and then we set our chosen image as the background of said block.

/* This piece of code removes the default icons. */
.contact .icon {
display: none;
}

/* This piece of code preps the empty block we will aplly the background to */
.contact .inner a::before {
width: 16px;  /* This is what changes the size of your icons. I recommend setting it to match your font size */
display: inline-block;
aspect-ratio: 1 / 1;
background-size: cover;
content:"";
}

/* And then one of the two following code snippets will apply the background, depending on what you want to do: */
/* If you want to change all the icons to the same image:  */
.contact .inner a:before {
background-image: url(your image url goes here!);
}

/* If you want to change the icons to different images: */
/* "Add to friends" */
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a::before {
background-image: url(your image url goes here!);
}

/* "Add to favorites" */
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a::before {
background-image: url(your image url goes here!);
}

/* "Send message" */
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a::before {
background-image: url(your image url goes here!);
}

/* "Forward to friend" */
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a::before {
background-image: url(your image url goes here!);
}

/* "Instant message" */
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a::before {
background-image: url(your image url goes here!);
}

/* "Block user" */
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a::before {
background-image: url(your image url goes here!);
}

/* "Add to group" */
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a::before {
background-image: url(your image url goes here!);
}

/* "Report user" */
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a::before {
background-image: url(your image url goes here!);
}

Changing other icons: Notification icon and Online icon

Here is the code to change the online and notification icons:

/* Changes the online icon*/
.online .icon {
content: url(your image url goes here!);
}

/* Changes the notification icon on the navbar*/
nav .links .icon {
content: url(your image url goes here!);
}

Where to find icons

The best way to look for icons is, in my option, to search for "favicons" or "pixels". These terms are popular on both neocities and tumblr, and there are plenty of pages dedicated to sharing them. As I've stated before, Ideally your icons should be between 15x15 and 20x20 pixels in size. But you might want to go bigger if you're using a larger font on your page. Anything above 25x25 will likely need to be rescaled in order to look good.

Some pixels/favicons collections I recommend are: mp4's graphics resources and Pixel Safari. You can start looking for icons there!