CSS Tutorial: Changing Icons in Contacts Table

I have not seen a recent, useful tutorial on changing the icons in the contacts table, with the ability to resize them easily. Copy this CSS into the "About Me" tab, change the content urls and sizes, and then you're done! 

<style>

.contact{

padding: 5px

}

.contact .f-col{

padding: 0px 0px 7px;

}

/* Enable Flexbox for Alignment */

.contact .inner a {

display: flex; 

}

/* Space Between Icon and Text */

.contact .inner a img {

margin-right: 4px;

font-size: 0;

}

.contact .inner a img:before {

font-size: 1em;

display: block

}

/* Add to Friends */

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a img[src*="add.png"] {

content: url(post URL here);

width: 20px;

height: 20px;

}

/* Pending Friend Request */

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a img[src*="hourglass.png"] {

content: url(post URL here);

width: 20px;

height: 20px;

}

/* Remove Friend */

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a img[src*="delete.png"] { 

content: url(post URL here);

width: 20px;

height: 20px;

}

/* Add to Favorites */

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a img[src*="award_star_add.png"] { 

content: url(post URL here);

width: 20px;

height: 20px;

}

/* Send Message */

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a img[src*="comment.png"] {

content: url(post URL here);

width: 20px;

height: 20px;

}

/* Forward To Friend */

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a img[src*="arrow_right.png"] {

content: url(post URL here);

width: 20px;

height: 20px;

}

/* Instant Message */

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a img[src*="email.png"] {

content: url(post URL here);

width: 20px;

height: 20px;

}

/* Block User */

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a img[src*="exclamation.png"] {

content: url(post URL here);

width: 20px;

height: 20px;

}

/* Add to Group */

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a img[src*="group_add.png"] {

content: url(post URL here);

width: 20px;

height: 20px;

}

/* Report User */

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a img[src*="flag_red.png"] {

content: url(post URL here);

width: 20px;

height: 20px;

}

</style>