css - Wordpress Twenty Twelve - 导航菜单中的社交图标

Question

我正在尝试将社交图标添加到我的导航菜单中。我已经完成了以下步骤:

1. 添加新的导航链接
2. CSS 类示例“menu-twitter”
3. 在子主题文件夹“images”中创建一个 mapp

4. 导入的 twitter.png

5. 在 style.css 中添加以下代码

   .menu-facebook {
       text-indent: -9999px;
       background-image: url(images/facebook.png) !important;
       background-repeat: no-repeat !important;
       margin-left: 100px !important; 
       width: 50px; 
   }
   
   .menu-facebook a:hoover {
       background: #f5f5f5 !important;
   }
   
   .menu-twitter {
       text-indent: -9999px;
       background-image: url(images/twitter.png) !important;
       background-repeat: no-repeat !important;
       margin-left: 100px !important; 
       width: 50px; 
   }
   
   .menu-instagram {
       text-indent: -9999px;
       background-image: url(images/instagram.png) !important;
       background-repeat: no-repeat !important;
       margin-left: 100px !important; 
       width: 50px; 
   }
   
   .menu-instagram a:hoover {
       background: #f5f5f5;
   }
   

查看我的网站 hkochd.suplife.se

我无法点击它而且它的位置很奇怪，我做错了什么？

*抱歉英语不好。

Answer 1

这里的问题是，链接是用 <a> 锚定的<li> 内的标签标签。通过您的代码，您将 anchor 缩进了页面。

为避免这种情况，您可以将 css 应用于 <a>标签而不是 <li>标签。

修改后的代码可以使用

.menu-facebook a {
    text-indent: -9999px;
    background-image: url(images/facebook.png) !important;
    background-repeat: no-repeat !important;
    margin-left: 100px !important; 
    width: 50px; 
}
.menu-facebook a:hover {
    background: #f5f5f5 !important;
}
.menu-twitter a {
    text-indent: -9999px;
    background-image: url(images/twitter.png) !important;
    background-repeat: no-repeat !important;
    margin-left: 100px !important; 
    width: 50px; 
}
.menu-instagram a {
    text-indent: -9999px;
    background-image: url(images/instagram.png) !important;
    background-repeat: no-repeat !important;
    margin-left: 100px !important; 
    width: 50px; 
}
.menu-instagram a:hover {
    background: #f5f5f5;
}