Platzieren Sie das Symbol im Titel der WordPress-Seite

Diese Website wird mit WordPress betrieben. Das Thema hat eine Facebook-Schaltfläche, die in der Kopfzeile angezeigt wird.

Ich möchte die Facebook-Schaltfläche des Themas in die Seitentitelzeile verschieben.
Hier ist ein Bild von dem, was ich versuche zu tun. Ich dachte, ich könnte diesen Code irgendwo in das Child-Theme kopieren.

<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>

Ich habe diesen Code in content.php, content-none.php, content-single.php, content-page.php kopiert, aber jetzt wird er nicht richtig angezeigt. So sieht es jetzt aus.

Ich denke, dass ich die CSS-Formatierung von der Themenschaltfläche in der Kopfzeile auf die neue in den Inhaltstiteln kopieren kann. Als ich versuchte, das CSS zu kopieren, funktionierte es nicht.

Wie passe ich die Schaltfläche (im zweiten Bild eingekreist) so an, dass sie wie die erste aussieht?

Der Live-Code kann unter eingesehen werden healthylifeadvisors.com

Ich sehe, dass die ursprüngliche Schaltfläche dieses CSS zu verwenden scheint:

.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;}

und

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;}

Das CSS, das angezeigt wird, wenn ich die neue Schaltfläche inspiziere, lautet:

.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;
}

Das sollte es tun:

.entry-title 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;
}
.entry-title a.genericon-facebook-alt:hover {
  background-color: #3b5998;
  border-color: #3b5998;
  color: white;
}