将社交图标添加到特定标头容器中

Posted 2021-04-20

非常新的编程，我试图通过添加菜单右侧的社交媒体图标来自定义wordpress主题的标题。

我正在使用Wordpress插件“插入页眉和页脚”并添加以下代码：

<!-- Add icon library --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  
<!-- Add font awesome icons --> <a href="#" class="fa fa-facebook"></a>

它有效，但页面的主体向左移动。我想这是因为代码没有进入正确的div容器。

Website example

有没有解决方案将代码定位到不同的容器？还是另一种避免转变的解决方案？

谢谢！

答案

避免转变的一种方法是将社交媒体图标放在绝对定位的div中。从文档流中删除绝对定位的div（边距填充等），这样你的标题就会很好地居中。

需要注意的是，你需要一个z-index> 100，因为你的header的z-index为100. z-index用于将项目放在彼此的顶部（顶部最高）。

<div style="position: absolute;right: 20px;color: red;z-index: 1000;">
<a href="#" class="fa fa-facebook" hidefocus="true" style="outline: none;/* float: none; */"></a>
<a href="#" class="fa fa-twitter" hidefocus="true" style="outline: none;float: none;"></a>
</div>