Customize your own contacting icons!

Tags:

Description:

I'm creating this because I tried to find a good one code layout to customize the icons of contacting but none of them worked in my own layout that I use. Then, I tried to use some codes that already exists and editing it to see if could work, and yes, worked for me! I you have the same problem that I had, I hope this code can help you! IMPORTANT: change the URL/link to the gif or image you want to put in each contacting icon! IMPORTANT²: if you use a layout that already have customized contacting icons, try to find where are these codes are and then change de URL/link to other URL that you wish to put. Credit and/or commenting ''using it'' is not necessary!

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by melodeathgutszx (https://layouts.spacehey.com/layout?id=36617) -->

<style>

<!-- IMPORTANT!! Change the link of each contact with the link of the image/gif you want to use. Recommended 20x20 size. -->

     
}

.contact .inner a img {
    font-size: 0;
}
.contact .inner a img:before {
    font-size: 1em;
    display: block;

 }
    .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://yokai.crd.co/assets/images/gallery13/b994776e.gif?v=b4df531c")
    }
    .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	    /* add to favorites */
	    content: url("https://pixels.crd.co/assets/images/gallery16/c5de9d4e.gif?v=b3554822")
    }
    .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	    /* send Message */
	    content: url("https://supplies.ju.mp/assets/images/gallery05/ea48a749_original.gif?v=9163b103")
    }
    .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	    /* forward to friend */
	    content: url("https://pixels.crd.co/assets/images/gallery30/e13cfa99.gif?v=1987e5e0")
    }
    .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	    /* instant message */
	    content: url("https://pixels.crd.co/assets/images/gallery64/d7edb417.gif?v=b3554822")
    }
    .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	    /* block user */
	    content: url("https://pixels.crd.co/assets/images/gallery28/03f386ae.gif?v=b3554822")
    }
    .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	    /* add to group */
	    content: url("https://caterpie.crd.co/assets/images/gallery23/397a0523.gif?v=8cec5808")
    }
    .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	    /* report user */
	    content: url("https://media.discordapp.net/attachments/1112600099479097344/1112619167233867817/ezgif-4-1fc3bcb925.gif")
    } </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 83 comments ( View all | Add Comment )

Calvinista	1745119696 using Report Comment
CAL1✮⋆˙	1744943977 usingg‼ Report Comment
ᓚ₍ ^. .^₎	1744527815 using!! Report Comment
pluto ✶	1744465507 using !! Report Comment
Alice	1744138399 using ^^ Report Comment
no1knowme	1743879470 usingg Report Comment
Ñam	1743621260 usingg Report Comment
ro_zzz	1743371103 ty <33333333 Report Comment
17xpl	1742295968 Using Report Comment
17xpl	1742295968 Using Report Comment
Vonnie	1742175226 I tried to use this and for some reason the image is like huge how do I change the size is it the link thing I’m using? Report Comment hi! sadly i do not have big skills on html codes so this is why i am in the layout blog asking to already use a small sized gif/image, recommended a 20x20 pixel images/gifs. by melodeathgutszx; 1742240640; Report
ཐི ⋅ Micah ⋅ ཋྀ	1742173737 YOURE AN ANGEL SENT BY HEAVEN Report Comment
rio	1742152561 ive been looking for this!! using :> Report Comment
selkie	1742144305 using tysm!! however when i input my gifs it doesnt replace the icons it just places them next to the old icons... anyone got any tips? T_T Report Comment this is so weird, the code is to already replace the old icons with the new one... sorry, i do not have big skills in html codes and its been years since i havent touch often in this type of codes by melodeathgutszx; 1742240922; Report looks like you figured it out! how? by حنان; 1742287243; Report i googled some code!! i added it before the icons :D .contact .icon { display: none; } by selkie; 1742299884; Report oh and makesure to put a style tag before / put it inside a style tag by selkie; 1742299911; Report
x3M1L10x_1S_4_H4Z4RD_XD	1741337945 Tysmmmmmm :3 using! ^^ Report Comment
kenny	1741224160 thank yoou!! using Report Comment
ppan	1741061488 usingg thx cutiee <333 Report Comment
f1nnw1z4rd	1739548755 thank u sm (^▽^人) Report Comment
bonny﹒	1739457788 how to change size.. Report Comment for this one, i recommend you to already use an 20x20px sized image/gifs. by melodeathgutszx; 1739470425; Report
kann1balKannabz	1738993172 Using!! Report Comment