字体真棒样式

Question

我正在尝试设置四个 Font Awesome 图标的样式，但是当我将它们的高度和宽度设置在 10 像素以下时，它会出现，悬停状态会变得混乱。

目标是让它们以白色显示并具有悬停效果，将图标更改为白色背景的红色。想法？

如果有帮助，我会将其放入引导导航中。此外，如果您对最新的 Bootstrap 感到满意，我似乎无法将导航栏覆盖在 Bootstrap Carousel 的顶部，而是将 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 {
	font-size: 1em;
	color: #ffffff;
	width: relative;
	height: relative;
	text-align: center;
	padding: 5px;
	transition: all 0.4s ease-in-out;
}

#socialnav .fa:hover {
	color: #c9001f;
	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>