Report Blog Entry
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!
Comments
Displaying 20 of 24 comments ( View all | Add Comment )
iocaste β!
thank you so much! this is exactly what I needed!
leo
using, thanks alot man :)
WowEureka
thanks!
VertigoMindwarp
I'm using it now, many thanks :)
β _Sh4rkK1ttyOnSt4rs_β
how do i change the size of the content/gif? <:3
NiVONA:3
sorry to ask but do you know how to change the font size of the contact section and only the contact section :0
Raven
it doesn't work for me. did the coding for it maybe change?
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; ; Report
Ducky~β
does anyone know why the default icons are still showing on my layout in addition to the custom ones?
SickPrince
THX <3
β° πΈππππ β°
Doesn't work for me
mae
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
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
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 :(
it could be because the text in the contacts are links? im not sure
by faolan/beetle/mutt β§β£βΆ; ; Report
β§Morganna Bramah
Wonderful bit of code, thank you!
Zombie
ty!!!
M0R0NTV
This is cool! Is there a way to make the icon an image?
replace the emojis with the img src code
by psyclone; ; Report
AmandaRachelle
what section of the profile do we paste this into?
about me or who i want to meet
by rex; ; Report
ty
by AmandaRachelle; ; Report
Mike
I'm looking for code to add an image on the contact area background. Can someone please help?
Ang
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
Check my older posts, including β3 things to make Spacehey Betterβ and βauto playing sound effectsβ
by Cory
;
;
Report
SlowRiot
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.
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
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..
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