WordPress : placer l’icône dans le titre de la page WordPress

Ce site Web est exécuté avec WordPress. Le thème a un bouton Facebook qui s’affiche dans l’en-tête.

Je souhaite déplacer le bouton Facebook du thème dans la ligne de titre de la page. Voici une photo de ce que j’essaie de faire. Je pensais pouvoir copier ce code dans le thème enfant quelque part.

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

J’ai copié ce code dans content.php, content-none.php, content-single.php, content-page.php mais maintenant il ne s’affiche pas correctement. Voilà à quoi ça ressemble maintenant.

Je pense que je peux copier la mise en forme CSS du bouton des thèmes dans l’en-tête vers le nouveau dans les titres de contenu. Lorsque j’ai essayé de copier le css, cela n’a pas fonctionné.

Comment modifier le bouton (entouré dans la deuxième image) pour qu’il ressemble au premier ?

Le code en direct peut être consulté surhealthylifeadvisors.com

Je vois que le bouton d’origine semble utiliser ce 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;}

et

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

Le CSS affiché lorsque j’inspecte le nouveau bouton est :

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

Solution n°1 trouvée

Cela devrait le faire:

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