我根据建议创建了自定义社交媒体图标菜单here, 使用自定义链接和可选CSS类。
我的子主题页脚。php目前有
<?php if ( has_nav_menu( \'social\' ) ) : ?>
<nav class="social-navigation" role="navigation" aria-label="<?php esc_attr_e( \'Footer Social Links Menu\', \'twentysixteen\' ); ?>">
<?php
wp_nav_menu(
array(
\'theme_location\' => \'social\',
\'menu_class\' => \'social-links-menu\',
\'depth\' => 1,
\'link_before\' => \'<span class="screen-reader-text">\',
\'link_after\' => \'</span>\',
)
);
?>
</nav><!-- .social-navigation -->
<?php endif; ?>
以下是我在我的孩子主题中得到的输出
下面是父主题的输出
父主题使用属性选择器结合伪元素在锚标记之前插入字体awesome图标
.social-navigation a[href*="codepen.io"]:before {
content: "\\f216";
}
我没有将父CSS文件排队，因为我正在使用自己的CSS进行样式和布局。
我的问题是，我如何使用上面的内容在我的孩子主题中生成相同字体的很棒的图标输出
I adjusted wp_nav_menu in child theme footer.php to
<?php
wp_nav_menu(
array(
\'theme_location\' => \'social\',
\'container\' => \'false\',
\'link_before\' => \'<span class="screen-reader-text">\',
\'link_after\' => \'</span>\',
)
);
?>
这将产生以下输出，但是，图标不可单击
<footer class="footer">
<ul id="menu-social" class="menu"><li id="menu-item-218" class="fab fa-github menu-item menu-item-type-custom menu-item-object-custom menu-item-218"><a href="https://github.com/810311"><span class="screen-reader-text">github</span></a></li>
</ul>
</footer>
最合适的回答,由SO网友:Tony Djukic 整理而成
在CSS中，确保有以下规则：
.screen-reader-text{
display:none;
}
#menu-social li[class*=\'fa-\']:before{
content:\'\';
}
#menu-social li[class*=\'fa-codepen\'] > a:before{
content:\'\\f1cb\';
}
#menu-social li[class*=\'fa-github\'] > a:before{
content:\'\\f09b\';
}
#menu-social li[class*=\'fa-youtube\'] > a:before{
content:\'\\f167\';
}
你看到的是一些标签，这些标签旨在提高视力受损者的可访问性，以便他们的屏幕阅读器知道该读什么。这可能已经存在于父主题CSS中，但由于没有包含指令，它仍然显示标签。
Update
我添加了新的选择器，将针对
<a href=""> 而不是针对
<li>. 这样，您仍然可以将fontawesome的类添加到
<li> 标记，然后输出图标
:before 或
:after 这个
<a href="">. 这实际上只是一个与你的选择者更深入一层的问题。
