Question

我在网上找到了这个教程，将菜单图标添加到wordpress导航栏：http://www.wpexplorer.com/adding-images-wordpress-menu/

我遵循了，似乎工作得很好。但是，我需要隐藏菜单的文本标签，以便我只显示图标。

我发现这应该隐藏文字：http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

再次，它看起来效果很好，但它在菜单中留下了大约400px的空白部分。

如你所见：goo.gl/46yUrt

我的代码：

.twitter-icon a{
   padding-left: 30px !important;
   background-image: url(images/icons/Twitter-01.png);
   background-position: left;
   background-repeat: no-repeat;
   text-indent: 100%;
   white-space: nowrap;
   overflow: hidden;
}

.twitter-icon a:hover{
   padding-left: 30px !important;
   background-image: url(images/icons/Twitter-02.png);
   background-position: left;
   background-repeat: no-repeat;
   text-indent: 100%;
   white-space: nowrap;
   overflow: hidden;
}

如果您需要更多详细信息，请告知我们（仅供我参加AFK几个小时）

Answer 1

社交导航的行为确实很糟糕，但如果你想在所有4个社交网站中都有图片图标，你可以尝试设置：

padding: 17px 10px;
font-size: 0px;

在.nav-social li a课程上。

此外，您需要非常使用类screen-reader-text skip-link的元素，这些元素溢出社交导航，因此鼠标悬停在效果上失败。

隐藏导航菜单中的文本

1 个答案: