child theme font awesome icons not working

In your CSS, make sure you have this rule:

.screen-reader-text{
     display:none;
}
#menu-social li[class*='fa-']:before{
     content:'';
}
#menu-social li[class*='fa-codepen'] > a:before{
     content:'\f1cb';
}
#menu-social li[class*='fa-github'] > a:before{
     content:'\f09b';
}
#menu-social li[class*='fa-youtube'] > a:before{
     content:'\f167';
}

What you’re seeing is labels intended to improve accessibility for the visually impaired so that their screen reader knows what to read. That probably already exists in the parent theme CSS but since you’re not including the instruction it’s still showing the labels.

Update

I’ve added new selectors that will target the <a href=""> instead of targeting the <li>. This way, you can still add the classes for fontawesome to the <li> tags but then output the icons :before or :after the <a href="">. It’s really just a matter of going one level deeper with your selectors.