php - 在 WordPress 页面标题中放置图标

本网站使用 WordPress 运行。该主题有一个显示在标题中的 Facebook 按钮。

我想将主题的 Facebook 按钮移动到页面标题行中。
Here is a picture of what I'm trying to do 。
我想我可以将此代码复制到某个地方的子主题中。

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

我已将该代码复制到 content.php、content-none.php、content-single.php、content-page.php 中，但现在显示不正确。 This is what it looks like now 。

我想我可以将标题中的主题按钮的 CSS 格式复制到内容标题中的新格式。当我尝试将 css 复制过来时，它不起作用。

如何调整按钮(在第二个图像中圈出)看起来像第一个？

实时代码可以在 healthylifeadvisors.com 查看

我看到原始按钮似乎正在使用这个 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;}

和

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

当我检查新按钮时显示的 CSS 是:

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

最佳答案

这应该这样做:

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

关于php - 在 WordPress 页面标题中放置图标，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34667978/