소셜 미디어 링크 스타일을 올바르게 지정하는 방법

Question

Link To Website

탐색 메뉴의 소셜 미디어 링크를 참조하십시오. 탐색 메뉴의 다른 링크 위로 마우스를 가져 가면 글꼴의 색상이 바뀌지 만 소셜 미디어 링크 위로 마우스를 가져 가면 배경 채우기가 늘어나고 옆으로 이동한다는 것을 알 수 있습니다. 필요. 내가 원하는 것은 네비게이션 메뉴 (# 76abdc)의 다른 링크와 같은 밝은 푸른 색으로 채울 링크를 가리키는 것입니다. 예를 들어 Facebook 아이콘의 "f"는 # 76abdc로 채워지고 트위터 아이콘의 새는 # 76abdc로 채워지고 LinkedIn 아이콘의 "in"은 # 76abdc로 채워집니다.

개인적으로이 스타일이 어떻게 적용되었는지는 모르지만 (사이트의이 부분을 개발하지는 못했지만), 글꼴을 굉장하게 사용하고 있으며 다음과 같은 스타일을 강제로 사용할 수 있음을 알고 있습니다. 이러한 클래스 위에 마우스를 올려 :

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

을 제거하려했다 그러나 이것은 실제로 패딩 (???)

을 증가시키는 것

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

내가해야합니까 : - 33,210

는 외관에서 다음과 같이> 위젯 (이 방법에 의해, 워드 프레스 사이트), I는 "헤더 소셜 미디어"를위한 HTML이라고 볼 수도 있습니다 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;} 

이