我正在尝试为我的主题中的页脚创建一个社交链接菜单。我想在仪表板中有一个可自定义的菜单，我想链接与其中的内容相关。
最初，我是这样做的：
<a href="http://www.facebook.com/" target="_blank"><i class="fa fa-facebook circle"></i></a>
<a href="http://www.google.com/" target="_blank"><i class="fa fa-google-plus circle"></i></a>
<a href="http://www.twitter.com/" target="_blank"><i class="fa fa-twitter circle"></i></a>
<a href="http://www.linkedin.com/" target="_blank"><i class="fa fa-linkedin circle"></i></a>
用于硬编码菜单项。
现在，我想使用
<?php wp_nav_menu( array( \'theme_location\' => \'social\' ) ); ?>
生成
<li> 但要意识到这样做会给链接贴上标签，即。
Facebook 内部
<li><a> 标签。
i、 e。<li class="fa fa-facebook circle"><a href="fb.com">Facebook</a></li>
这不太好，因为1。脸书标签阻碍和2。是唯一可以点击的东西。
我想在我的类之外获得链接标签（由Wordpress通过菜单自定义自动设置）
我意识到我可以写<i> 在标签内为每个菜单项初始化，但这违背了我在这里要实现的目的。
编辑：我希望有一个在某种程度上不排除黑客攻击的解决方案。
最合适的回答,由SO网友:C C 整理而成
这是一个艰难的过程。通常我会说使用text-indent:-99999px; 作为标记的一部分<a> -- 将链接文本从屏幕上删除。但你有fa 斜体标记，实际上也是文本-因此它也会从屏幕上移开。
这个解决方案很难看，但您可能可以调整它以供使用。
将社交链接包装在div中：
<div id="social-wrapper">
<a href="http://www.facebook.com/" target="_blank"><i class="fa fa-facebook circle"></i>Facebook</a>
<a href="http://www.google.com/" target="_blank"><i class="fa fa-google-plus circle"></i>Google</a>
<a href="http://www.twitter.com/" target="_blank"><i class="fa fa-twitter circle"></i>Twitter</a>
<a href="http://www.linkedin.com/" target="_blank"><i class="fa fa-linkedin circle"></i>LinkedIn</a>
</div>
然后。css如下：
#social-wrapper .fa {
color: #000;
}
#social-wrapper a {
color: transparent;
display: inline-block;
margin: 0 8px;
overflow: hidden;
width: 15px;
}
设置该宽度以适应您的。fa图标宽度。这是一个
jsfiddle 这说明了它是如何工作的。
EDIT:
好的，我没有意识到你无法使用上述解决方案。这里有一个不那么难看的版本，仍然使用CSS。除此之外，您还需要编写自己的实现
wp_nav_menu 以您想要的方式获取内容，而不是依赖css解决方案。
与上面的HTML相同，带有包装器div。
此CSS：
#social-wrapper {
text-indent: -99999px;
}
#social-wrapper a {
width: 30px;
float: left;
}
#social-wrapper .fa {
display: inline-block;
vertical-align: middle;
width: 0;
text-indent: 99999px;
}
这是
another fiddle 展示其工作原理。
SO网友:insidesin
我的解决方案很奇怪。有点黑客，使用CC的解决方案是可行的，但我认为它被我的页脚中的其他内容所窃听。（我很傻）
#social_area {
li a {
display: block;
color: transparent;
overflow: hidden;
margin-top: -45px;
width: 100%;
}
}
HTML看起来有点像这样。
<ul id="menu-social-media">
<li class="fa fa-facebook circle"><a title="Facebook" target="_blank" href="http://www.facebook.com/">Facebook</a></li>
<li class="fa fa-instagram circle"><a title="Instagram" target="_blank" href="http://www.instagram.com/">Instagram</a></li>
<li class="fa fa-pinterest circle"><a title="Pinterest" target="_blank" href="http://au.pinterest.com/">Pinterest</a></li>
<li class="fa fa-yelp circle"><a title="Yelp" target="_blank" href="http://www.yelp.com/">Yelp</a></li>
</ul>
被#social\\u area div.包围。
我想我花了一个小时试着让它发挥作用，但正是另一种元素的风格破坏了它。（为什么这玩意儿不管用！？）
谢谢CC！
