Wordpress 二十十二 - 导航菜单中的社交图标答案

【问题标题】：Wordpress Twenty Twelve - Social icons in navigation menuWordpress 二十十二 - 导航菜单中的社交图标
【发布时间】：2018-07-20 01:23:22
【问题描述】：

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

添加新的导航链接
Css 类示例“menu-twitter”
在子主题文件夹“images”中创建地图
导入的twitter.png

在 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

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

*抱歉英语不好。

【问题讨论】：

标签： css wordpress icons social

【解决方案1】：

这里的问题是，链接是用<a> 标记锚定在<li> 标记内的。通过您的代码，您将锚点缩进页面之外。

为避免这种情况，您可以将 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;
}

【讨论】：

【解决方案2】：

你也需要改变你

.a:hoover {

到：

.a:hover {

让这些元素在悬停时真正改变背景颜色。祝你的网站好运！

【讨论】：