airington on "Social Media Icons"

I'm trying to find where I would add the code to add my own social media icons. (www.raisingawarrior.com) I've uploaded my images to media (this is the FB one: http://www.raisingawarrior.com/wp-content/uploads/2016/04/fb.png). I also have hover images.

I don't know if this helps, but here's a piece of the ccs theme code for the social media links.

}
.social-navigation a:before,
.social-navigation a[href*="facebook.com"]:before,
.social-navigation a[href*="twitter.com"]:before,
.social-navigation a[href*="plus.google.com"]:before,
.social-navigation a[href*="instagram.com"]:before,
.social-navigation a[href*="pinterest.com"]:before,
.social-navigation a[href*="youtube.com"]:before,
.social-navigation a[href*="vimeo.com"]:before,
.social-navigation a[href*="tumblr.com"]:before,
.social-navigation a[href*="flickr.com"]:before,
.social-navigation a[href*="linkedin.com"]:before,
.social-navigation a[href*="wordpress.com"]:before,
.social-navigation a[href*="wordpress.org"]:before,
.social-navigation a[href*="bloglovin.com"]:before,
.social-navigation a[href*="etsy.com"]:before,
.social-navigation a[href*="skype"]:before,
.social-navigation a[href$="/feed/"]:before,
.social-navigation a[href*="contact"]:before {
width: 26px;
height: 26px;
font-size: 20px;
}
.social-navigation a:before {
content: 'f107';
}
.social-navigation a[href*="facebook.com"]:before {content: 'f204';}
.social-navigation a[href*="twitter.com"]:before {content: 'f202';}
.social-navigation a[href*="plus.google.com"]:before {content: 'f206';}
.social-navigation a[href*="instagram.com"]:before {content: 'f215';}
.social-navigation a[href*="pinterest.com"]:before {content: 'f209';}
.social-navigation a[href*="youtube.com"]:before {content: 'f213';}
.social-navigation a[href*="vimeo.com"]:before {content: 'f212';}
.social-navigation a[href*="tumblr.com"]:before {content: 'f214';}
.social-navigation a[href*="flickr.com"]:before {content: 'f211';}
.social-navigation a[href*="linkedin.com"]:before {content: 'f207';}
.social-navigation a[href*="wordpress.com"]:before {content: 'f205';}
.social-navigation a[href*="wordpress.org"]:before {content: 'f205';}
.social-navigation a[href*="bloglovin.com"]:before {content: 'f461';}
.social-navigation a[href*="etsy.com"]:before {content: 'f447';}
.social-navigation a[href*="skype"]:before {content: 'f220';}
.social-navigation a[href$="/feed/"]:before {content: 'f413';}
.social-navigation a[href*="contact"]:before {content: 'f410';}

Thank you for any help.