Hey there kgueter1,
Without going to much into the code of the theme, you can get this result: https://goo.gl/TAKbU0 — with only css and a child theme.
What you need to do is to go to Appearance -> Menus, create 2 new links for the menu, LinkedIn and Twitter, go to Screen Options tab at the the menus screen and tic CSS Classes. Now you will have a new field next to URL and Label when you click on your new menu link. You would have to enter 2 terms there, “social-icn” and “soc-twitter” / “soc-linkedin” without the quotes like here: https://goo.gl/FGvxN7 .
Then all you need to do is add this css to your child theme by going to Appearance -> Editor
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");
.social-icn {
position: relative;
top: -20px;
}
.social-icn a {
margin-left: 40px;
}
.soc-linkedin a {
background: #007bb5;
color: #fff !important;
text-shadow: none !important;
}
.soc-twitter a {
background: #00aced;
color: #fff !important;
padding-right: 15px !important;
text-shadow: none !important;
}
.soc-linkedin a:hover {
background: #125688 !important;
}
.soc-twitter a:hover {
background: #007BA7!important;
}
.soc-linkedin:before {
font-family: "fontawesome";
content: "\f0e1";
position: relative;
top: 25px;
padding-left: 5px;
margin-left: 15px;
background: #007bb5;
padding: 7px 8px 7px 10px;
color: #fff;
border-right: 1px solid #cacfd2;
text-shadow: none !important;
}
.soc-twitter:before {
font-family: "fontawesome";
content: "\f099";
position: relative;
top: 25px;
padding-left: 5px;
margin-left: 15px;
background: #00aced;
padding: 7px 8px 7px 10px;
color: #fff;
border-right: 1px solid #cacfd2;
text-shadow: none !important;
}