🖥 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

Comments

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

★_Sh4rkK1ttyOnSt4rs_★	1708438544 how do i change the size of the content/gif? <:3 Report Comment
NiVONA:3	1707923846 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	1705787074 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: <style> .contact.etc. [pretend the middle of the code is here] content: <style 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 -> https://pixels.crd.co/#pixels Then simply go to each of the end that say content: "emoji" and change it to content: url("nameofwebsite.com") Hope this works for you!! by xXSoupXx; 1706147204; Report
Ducky	1700096208 does anyone know why the default icons are still showing on my layout in addition to the custom ones? Report Comment
SickPrince	1698783145 THX <3 Report Comment
✰ 𝕸𝖆𝖗𝖌𝖊 ✰	1685918394 Doesn't work for me Report Comment
Twilight Lover #1	1680556436 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') or 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*; 1681422401; Report
mae	1679908846 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; 1680329304; Report
juuuuuulia	1677371199 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 ⚧⚣Ⓐ; 1690575610; Report
⛧Morganna Bramah	1649089641 Wonderful bit of code, thank you! Report Comment
Zombie	1641251770 ty!!! Report Comment
M0R0NTV	1640016967 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; 1676850592; Report
AmandaRachelle	1637037682 what section of the profile do we paste this into? Report Comment about me or who i want to meet by rex; 1639325797; Report ty by AmandaRachelle; 1639372853; Report
Mike	1613243738 I'm looking for code to add an image on the contact area background. Can someone please help? Report Comment
Ang	1613238503 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 ; 1613238581; Report
SlowRiot	1613111863 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 ; 1613144097; 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; 1613184637; Report
Lexa Terrestrial	1612806029 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 ; 1612806504; Report
razzy	1611654887 Thank you!! :) Report Comment
♡ ฿Ʉ₦₦Ɏ ♡	1611650657 Thank you, just what I needed Report Comment
psycho	1611200354 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 ; 1611206444; Report thank u ! i will make sure to do so! by psycho; 1611220218; Report hi! was wondering if u looked into this at all ? ;o by psycho; 1611275351; Report i'm 2 years late but was there ever an answer to this ??? been googling like a mad man by 𝔤𝔲𝔱𝔡𝔦𝔢𝔱; 1675440942; Report