Wie Style Social Media Links korrekt

Question

Link To Website

Bitte beachten Sie die Social-Media-Links in dem Navigationsmenü. Sie werden bemerken, dass wenn Sie über die anderen Links im Nav-Menü fahren, ihre Schriftart die Farben ändert, aber wenn Sie den Mauszeiger über die Social-Media-Links bewegen, wird ihr Hintergrundabstand erhöht und sie werden zur Seite verschoben - das ist nicht was ich wollen. Ich möchte nur, dass die Links mit der gleichen hellblauen Farbe gefüllt werden wie die anderen Links im Nav-Menü (# 76abdc), wenn Sie den Mauszeiger darüber bewegen. So wäre zum Beispiel das "f" im Facebook-Icon mit # 76abdc gefüllt, der Vogel im Twitter-Icon wäre mit # 76abdc gefüllt, und das "in" im LinkedIn-Icon wäre ebenfalls mit # 76abdc gefüllt.

Ich persönlich weiß nicht, wie dieser Stil angewendet wurde (ich habe diesen Teil der Website nicht entwickelt), aber ich weiß, dass es font-awesome verwendet und Sie können die folgenden Stile anzeigen, wenn Sie erzwingen: schweben über diese Klassen:

.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; 
} 

hatte ich versucht, die Polsterung loszuwerden

padding: 2px 5px !important; 

Aber das scheint tatsächlich die Polsterung zu erhöhen (???)

im Aussehen -> Widgets (Dies ist eine Wordpress-Seite, nebenbei bemerkt), ich kann auch sehen, dass die HTML-Code für "Header Social Media" ist wie folgt:

<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> 

Muss ich hier und da etwas im CSS zu ändern? Wie? Vielen Dank!

EDIT - Aktualisiert 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;} 

Versuchen Sie, die margin-right und fügen padding: 0px !important auf die sozialen Verbindungen zu entfernen und geben Spielraum, um es