字體真棒造型

Question

我想風格四個字體真棒圖標，但它出現時，我把它們的高度和寬度低於10px，懸停狀態變得混亂。

目標是讓它們以白色顯示並具有懸停效果，將圖標更改爲帶白色背景的紅色。思考？

如果有幫助，我把它放在bootstrap導航欄中。另外，如果您對最新的Bootstrap感到滿意，我似乎無法將導航欄覆蓋在Bootstrap Carousel上方，而是將傳送帶向下推。

CSS

#socialnav .fa { 
font-size: 1em; 
color: #ffffff; 
width:10px; 
height:10px; 
text-align:center; 
padding: 5px; 
transition:all 0.4s ease-in-out; 
} 

#socialnav .fa:hover { 
color: #c9001f; 
background-color: #ffffff; 
} 

HTML

<section id="socialnav"> 
    <nav class="navbar navbar-toggleable-sm navbar-inverse"> 
     <div class="navbar-collapse collapse" id="navigation"> 
      <ul class="nav navbar-nav ml-auto w-100 justify-content-end"> 
       <li class="nav-item"> 
        <a class="nav-link" href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="#"><i class="fa fa-youtube" aria-hidden="true"></i></a> 
       </li> 
      </ul> 
     </div> 
    </nav> 
</section> 

Answer 1

設置高度和寬度相對的，你不希望設置一個靜態的高度和寬度，以圖標或者背景將高度和寬度恰好爲10像素。看看我的codepen的工作例如：https://codepen.io/anon/pen/QgPboZ?editors=1111

#socialnav .fa { 
 
\t font-size: 1em; 
 
\t color: #ffffff; 
 
\t width: relative; 
 
\t height: relative; 
 
\t text-align: center; 
 
\t padding: 5px; 
 
\t transition: all 0.4s ease-in-out; 
 
} 
 

 
#socialnav .fa:hover { 
 
\t color: #c9001f; 
 
\t background-color: #ffffff; 
 
}

<section id="socialnav"> 
 
<nav class="navbar navbar-toggleable-sm navbar-inverse"> 
 
    <div class="navbar-collapse collapse" id="navigation"> 
 
    <ul class="nav navbar-nav ml-auto w-100 justify-content-end"> 
 
    <li class="nav-item"> 
 
    <a class="nav-link" href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a> 
 
    </li> 
 
    <li class="nav-item"> 
 
    <a class="nav-link" href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a> 
 
    </li> 
 
    <li class="nav-item"> 
 
    <a class="nav-link" href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a> 
 
    </li> 
 
    <li class="nav-item"> 
 
    <a class="nav-link" href="#"><i class="fa fa-youtube" aria-hidden="true"></i></a> 
 
    </li> 
 
    </ul> 
 
    </div> 
 
</nav> 
 
</section>