Question

编程非常新，我试图通过在菜单右侧添加社交媒体图标来自定义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

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

谢谢！

Answer 1

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

请注意，您需要z-index＆gt; 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>

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

1 个答案: