Faoil's profile picture

Published by

published
updated

Category: Web, HTML, Tech

How to change your contacting options buttons ★

Copy and paste this into your about me :) for now I've put emojis but you can change them to images (by putting this in the emojis place; <img src="enter image url" width="px" height="px">

Here's mine:

<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: "🌱"

}

.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: "🕯️"

}

</style>


4 Kudos

Comments

Displaying 2 of 2 comments ( View all | Add Comment )

eiiii°д°

eiiii°д°'s profile picture
Pinned

THANKS!! In content I used "content:url("")"


Report Comment



for images

by eiiii°д°; ; Report

yes! Thank you for adding

by Faoil; ; Report

kyle ★;

kyle   ★;'s profile picture

thx !! is there some way to change the contact backround and icons??


Report Comment