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

Question

Link To Website

请查看导航菜单中的社交媒体链接。您会注意到，当您将鼠标悬停在导航菜单中的其他链接上时，它们的字体会改变颜色，但是当您将鼠标悬停在社交媒体链接上时，它们的背景填充会增加并且它们会移到一边——这不是我想。我想要的只是当您将鼠标悬停在链接上时，链接填充与导航菜单（#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 网站）中，我还可以看到“Header Social Media”的 HTML 如下：

<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 添加到社交链接并留出余量