Change the contact icons to TF2 classes

Tags: contact icons, tf2, simple

Description:

Includes everyone except for Pyro. (Sorry buddy i love u) Let me know if it stops workin or if there's any problems with it!

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by 🎪 CL♡WN KISSER! 🎪 (https://layouts.spacehey.com/layout?id=107596) -->

<style> 
.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: url("https://i.ibb.co/1vpYdkF/Untitled37-20240531215131.png")
    }
    .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	    /* add to favorites */
	    content: url("https://i.ibb.co/QH5HBpr/Untitled37-20240531215158.png")
    }
    .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	    /* send Message */
	    content: url("https://i.ibb.co/bsgpmNf/Untitled37-20240531215217.png")
    }
    .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	    /* forward to friend */
	    content: url("https://i.ibb.co/Jy2YC4Z/Untitled37-20240531215246.png")
    }
    .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	    /* instant message */
	    content: url("https://i.ibb.co/8g0myrZ/Untitled37-20240531215312.png")
    }
    .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	    /* block user */
	    content: url("https://i.ibb.co/8b1NXRH/Untitled37-20240531215334.png")
    }
    .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	    /* add to group */
	    content: url("https://i.ibb.co/TWJrcxZ/Untitled37-20240531215358.png")
    }
    .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	    /* report user */
	    content: url("https://i.ibb.co/SxdbJxC/Untitled37-20240531215424.png")
    } 
</style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

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

☯𖤐A C 3𖤐☯	1733790875 Using!! Report Comment
/-/Chez/-/	1732996388 using!! Report Comment
west ₊⊹	1732904962 using! Report Comment
Chaossofii	1732826699 using Report Comment
jackelyn	1732675442 AAHH yay using Report Comment
remy120	1732495985 using <3 Report Comment
Tuna!!1	1732368856 using!!! Report Comment
scout	1731887854 using!! Report Comment Omg Scout tf2......hi scout ...... by 🎪 CL♡WN KISSER! 🎪; 1731945704; Report
Mtn Dew Glowstick :: 🐷🧢	1731230767 Using! ^__^ Report Comment UNCLE SAMSONITE SPOTTED by 🎪 CL♡WN KISSER! 🎪; 1731248545; Report It's time to have some fun, with Uncle Samsonite! by Mtn Dew Glowstick :: 🐷🧢; 1731262084; Report
jay	1731230607 when i add the code it doesnt seem to replace the og icons and the tf2 icons just appear beside them, how 2 fix? Report Comment Oh no :( maybe check your layout code to make sure there isn't any other icon codes interfering with it? by 🎪 CL♡WN KISSER! 🎪; 1731795120; Report
꒰აNas໒꒱	1730684666 usinggg <3 Report Comment
alice	1730263040 using! do you have any idea how i can make my own tiny images for it?? i tried to but it just made the pictures rlly big Report Comment never mind i figured it out! by alice; 1730264313; Report
Rhyol1te	1730001812 Using! Report Comment
larinervus	1729991145 usinggggg Report Comment
Lawrence555	1729303176 using!! Report Comment
Alveus Nosville	1729170516 Most of thexe make little sense but least of all the Block being medic. Literally everyone except maybe Scout would've worked better there. Pyro would've worked great for report too. None of these are a massive issue on their own but the filenames in the content links in code also make zero effort to indicate what's what. I like the idea but the execution here leaves me quite frustrated. Report Comment None of them are supposed to, cus it's just for decoration! The class icons don't have anything to do with the functions of the buttons, and frankly, I don't know how it could even be re-arranged to "make sense." If you don't like the way I did it, feel free to use the code to make your own. I am sorry about the file names being confusing though. by 🎪 CL♡WN KISSER! 🎪; 1729728317; Report
Skyler<3	1728200077 using :3 Report Comment
KitchenLover3000✮	1728006876 Using!!! Report Comment
🎵z0mb13KO🎧	1728005548 using ty!! Report Comment