如何正确设置社交媒体链接的样式

Question

请查看导航菜单中的社交媒体链接。您会注意到，当您将鼠标悬停在导航菜单中的其他链接上时，它们的字体会改变颜色，但是当您将鼠标悬停在社交媒体链接上时，它们的背景填充会增加并移到一边——这不是我想要的想。我想要的只是当您将鼠标悬停在导航菜单 (#76abdc) 上时，链接用与导航菜单 (#76abdc) 中的其他链接相同的浅蓝色填充。例如，Facebook 图标中的 "f" 将填充#76abdc，Twitter 图标中的小鸟将填充#76abdc，LinkedIn 图标中的 "in" 也将填充为#76abdc。

我个人不知道这种风格是如何应用的（我没有开发网站的这一部分），但我知道它使用了 font-awesome 并且你可以在强制时查看以下样式 a:hover 在这些类:

.secondary-navbar .navbar-nav > li > a:hover {
    background-color: #fff;
    border-radius: 5px;
    color: #1971b9;
    font-weight: bold;
    font-size: 120%;
    text-transform: uppercase;
    margin: 13px 12px 0; 
}

.secondary-navbar .social-links > li > a:hover, .secondary-navbar
.social-links > li > a:focus {
    margin: 13px 0 0 !important;
    padding: 2px 5px !important;
    background-color: #1971b9 !important;
    color: #fff!important;
    font-size: 180%!important;
    margin-right: -10px;
}

我曾尝试去掉填充

 padding: 2px 5px !important;

但这实际上似乎增加了填充(???)

在Appearance --> Widgets（顺便说一句，这是一个WordPress网站），我也可以看到HTML for "Header Social Media"如下：

<ul class="nav navbar-nav navbar-right social-links hidden-xs hidden-
sm">
    <li>
        <a href="#">
        <i class="fa fa-facebook-square" aria-hidden="true"></i>
        </a>
    </li>

    <li>
        <a href="#">
        <i class="fa fa-twitter-square" aria-hidden="true"></i>
        </a>
    </li>

    <li>
        <a href="#">
        <i class="fa fa-linkedin-square" aria-hidden="true"></i>
        </a>
    </li>
</ul>

我需要在此处或 CSS 中更改任何内容吗？如何？谢谢！

编辑 - 更新CSS:

.secondary-navbar .social-links > li > a {
    /*margin: 13px 0 0;*/
    margin: 13px 5px 0;
    padding: 2px 5px;
    background-color: #1a3664;
    color: #fff;
    font-size: 180%;
    /*margin-right:-10px;*/
    /*padding: 2px 5px !important;*/
    padding: 0px !important;

}

.secondary-navbar .social-links > li > a:hover ,
.secondary-navbar .social-links > li > a:focus {
    /*margin: 13px 0 0 !important;*/
    margin: 13px 5px 0!imporant;
    /*padding: 2px 5px !important;*/
    padding: 0px !important;
    background-color: #1971b9 !important;
    color: #fff!important;
    font-size: 180%!important;
    margin-right:-10px;
}

Answer 1

.secondary-navbar .social-links > li > a {
  margin: 13px 5px 0;
  padding: 2px 5px;
  background-color: #1a3664;
  color: #fff;
  font-size: 180%;
  /* margin-right: -10px; */
  padding: 0px !important;
}

and on hover social links 



.secondary-navbar .social-links > li > a:hover, .secondary-navbar   .social-links > li > a:focus {
    margin: 13px 5px 0 !important;
   padding: 0px !important;
  background-color: #1971b9 !important;
  color: #fff!important;
  font-size: 180%!important;
  margin-right: -10px;}

尝试删除 margin-right 并添加 padding: 0px !important 到社交链接并留出余量

如何正确设置社交媒体链接的样式

How to Style Social Media Links Correctly

html

css

wordpress

hover

font-awesome