place icon in WordPress page title

This website is run with WordPress. The theme has a Facebook button which is displaying in the header.

I want to move the theme’s Facebook button into the page title line.
Here is a picture of what I’m trying to do.
I was thinking I could copy this code into the child theme someplace.

<a class="genericon_parent genericon genericon-facebook-alt"  title="Facebook" href="https://www.facebook.com/karen.b.russell.54" onclick="javascript:window.open('https://www.facebook.com/karen.b.russell.54'); return false;"><span class="screen-reader-text">Facebook</span> </a>

I have copied that code into content.php, content-none.php, content-single.php, content-page.php but now it is not displaying correctly. This is what it looks like now.

I am thinking that I can copy the CSS formatting from the themes button in the header to the new one in the content titles. When I tried to copy the css over it didn’t work.

How do I tweak the button (circled in the second image) to look like the first?

The live code can be viewed at healthylifeadvisors.com

I see the original button seems to be using this css:

.site .widget_catchadaptive_social_icons a.genericon {
background-color: #f2f2f2;
border: 1px solid #eee;
border-radius: 3px;
-moz-border-radius: 3px;
box-sizing: content-box;
-webkit-border-radius: 3px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
color: #404040;
margin: 0 0 5px 5px;
padding: 5px;}

and

healthylifeadvisors.com/media="all"
.genericon {
font-size: 16px;
vertical-align: top;
text-align: center;
-moz-transition: color .1s ease-in 0;
-webkit-transition: color .1s ease-in 0;
display: inline-block;
font-family: "Genericons";
font-style: normal;
font-weight: normal;
font-variant: normal;
line-height: 1;
text-decoration: inherit;
text-transform: none;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
speak: none;}

The CSS being shown when I inspect the new button is:

.entry-title, .entry-title a {
color: #404040;
}
healthylifeadvisors.com/media="all"
.genericon {
font-size: 16px;
vertical-align: top;
text-align: center;
-moz-transition: color .1s ease-in 0;
-webkit-transition: color .1s ease-in 0;
display: inline-block;
font-family: "Genericons";
font-style: normal;
font-weight: normal;
font-variant: normal;
line-height: 1;
text-decoration: inherit;
text-transform: none;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
speak: none;
}
a {
font-weight: 700;
color: #00BB58;
}
healthylifeadvisors.com/media="all"
a {
color: #21759b;
text-decoration: none;}
healthylifeadvisors.com/media="all"
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
border: 0;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}