Cory's profile picture

Published by


Category: Web, HTML, Tech

🖥 CSS Snippet: Changing The Contact Icons

Here's some code for replacing the contact icons in your box. Right now, I changed them to emojis, but you can change them to images by setting the content to url('yourimageurl') in the quotes. I recommend images that are 16x16 but you do you, boo. The text in-between the stars and slashes are just guides to help you remember what the things are; they won't change the text. Thanks to Virtual Machine for condensing the code a bit.

.contact .inner a img {
    font-size: 0;
.contact .inner a img:before {
    font-size: 1em;
    display: block
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* Add to Friends */
content: "💞"
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* Add to Favorites */
content: "🤘🏽"
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* Send Message */
content: "💬"
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* Forward to Friend */
content: "↗️"
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* Instant Message */
content: "📩"
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* Block User */
content: "🛑"
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* Add to Group */
content: "💎"
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* Report Profile */
content: "🚩"

Remember: always put any CSS in between two Style tags: <style></style> That way, browsers will recognize that what you're trying to do is adjust the style. Also remember that CSS stands for Cascading Style Sheets, so the browser will activate styles from top to bottom!

111 Kudos


Displaying 20 of 21 comments ( View all | Add Comment )


★_Sh4rkK1ttyOnSt4rs_★'s profile picture

how do i change the size of the content/gif? <:3

Report Comment


NiVONA:3's profile picture

sorry to ask but do you know how to change the font size of the contact section and only the contact section :0

Report Comment


Raven's profile picture

it doesn't work for me. did the coding for it maybe change?

Report Comment

So if you want to use the emojis as they are, you just need to ad right before and after the code in your about section. So it should look something like this:

[pretend the middle of the code is here]


Thats how I typed it and the emojis appeared! If you want to use a custom gif like me, I got the image address from this site ->

Then simply go to each of the end that say
content: "emoji"
and change it to
content: url("")

Hope this works for you!!

by xXSoupXx; ; Report


Ducky's profile picture

does anyone know why the default icons are still showing on my layout in addition to the custom ones?

Report Comment


SickPrince's profile picture

THX <3

Report Comment

✰ 𝕸𝖆𝖗𝖌𝖊 ✰

✰ 𝕸𝖆𝖗𝖌𝖊 ✰'s profile picture

Doesn't work for me

Report Comment

Twilight Lover #1

Twilight Lover #1's profile picture

How do you change the size of the image?

Report Comment

in the section of your about me page, when you add-hypothetically-you want to change the friends icon, you change it like this

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* Add to Friends */
content: url("xyz')
content: "✴️" (for the next example, i'll just use the emoji version for simplicity)

after you put the content, add your width & height/size adjustments like this: (if you don't understand this, or css in general, feel free to just copy and paste..)

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* Add to Friends */
content: "✴️"
width: 30px;
height: 30px;

i believe this will work but if you want to test it out and make sure, feel free to go ahead. :)

by jillian; ; Report


mae's profile picture

i've never messed w code before so bear with me, but are you able to use images saved to the desktop if it's looking for a url? i'd like to add in pixel art made in paint but idk how that would work

Report Comment

i'm not op but i know a bit about coding! the answer is basically no--if you were coding something that was hosted on your computer, as opposed to on a separate website (i.e., spacehey), then you would be able to do this. with spacehey though to get those images to work, you have to upload them to an image hosting website (i suggest imgur), right click on your uploaded image, and choose copy image url. then you have a url that you can plug into the above code and it should work!

feel free to im me if you run into any trouble, i'm happy to help if i can!

by ren >:3c; ; Report


juuuuuulia's profile picture

does anyone know how to change the text within the contact box? for some reason it doesn't change with the rest of the page :(

Report Comment

it could be because the text in the contacts are links? im not sure

by faolan/beetle/mutt ⚧⚣Ⓐ; ; Report

⛧Morganna Bramah

⛧Morganna Bramah's profile picture

Wonderful bit of code, thank you!

Report Comment


Zombie's profile picture


Report Comment


M0R0NTV's profile picture

This is cool! Is there a way to make the icon an image?

Report Comment

replace the emojis with the img src code

by psyclone; ; Report


AmandaRachelle's profile picture

what section of the profile do we paste this into?

Report Comment

about me or who i want to meet

by rex; ; Report


by AmandaRachelle; ; Report


Mike's profile picture

I'm looking for code to add an image on the contact area background. Can someone please help?

Report Comment


Ang's profile picture

wondering if you'd posted a code for adding music that autoplays

im a total noob and am trying to navigate through all the different coding languages and codes to make my perfect profile

as you can tell by my profile im a huge fan of the things youve posted for us so far, so thank u smmm

Report Comment

Check my older posts, including “3 things to make Spacehey Better” and “auto playing sound effects”

by Cory ; ; Report


SlowRiot's profile picture

I've used and altered some of your other CSS codes (thank you so much for providing so much help to us returning OG folk who are a tad rusty).

I've tried SO hard to add my own icon using a url. It doesn't work. :( It just completely removes the icon or it shows all of the code, even when it's within the code.

Have you tried and tested the url method yourself? I'm only asking to see if I'm doing something wrong somewhere.
Again... Thank you again for all you've posted so far. :)
I appreciate you.

Report Comment

make sure your code looks like this:

content:url('url goes here');

by Cory ; ; Report

Yeah, I tried all of that but it does nothing. Took the symbols away completely and did not replace them with the url'd image. :(

(congrats on your Chase win, btw :D)

by SlowRiot; ; Report

Lexa Terrestrial

Lexa 👽 Terrestrial 's profile picture

ooooh this is very kind. super helpful.
Do you know by chance how to do this for adding your information
for say like FB/Twitter/IG
Spacehey won't let me swear when I put the links in and click save.. .
it doesn't save them.. and then they don't show up on my profile
Been doing this for a month now..

Report Comment

I would reach out to An to figure out why that is. It seems like a bug. Between typing in your username and people seeing your social media links, Spacehey formats the proper links so it's not something I can specifically target or change.

by Cory ; ; Report


razzy's profile picture

Thank you!! :)

Report Comment

♡ ฿Ʉ₦₦Ɏ ♡

♡ ฿Ʉ₦₦Ɏ ♡'s profile picture

Thank you, just what I needed

Report Comment


psycho's profile picture

im trying to figure out how to change the contact box text? is there a way to do this?

Report Comment

There should be, if you ping me tomorrow I’ll look into it

by Cory ; ; Report

thank u ! i will make sure to do so!

by psycho; ; Report

hi! was wondering if u looked into this at all ? ;o

by psycho; ; Report

i'm 2 years late but was there ever an answer to this ??? been googling like a mad man

by 𝔤𝔲𝔱𝔡𝔦𝔢𝔱; ; Report