0
두 개의 텍스트가 가운데에있는 목록 항목에 위치하는 멋진 글꼴 아래에 텍스트가있는 버튼을 만들려고합니다. 앵커 요소가 필요합니다. 목록 항목의 전체 크기를 채우기 위해 멋진 글꼴 아이콘의 span 요소.앵커 내 텍스트 위의 멋진 스팬 아이콘
목록 항목을 앵커로 아무 문제없이 채울 수는 있지만 아이콘 스팬을 포함하는 앵커의 텍스트 위에 아이콘 스팬을 배치하는 데 문제가 있습니다.
JSFiddle : https://jsfiddle.net/qod142fz/.
HTML :
<div id="sidebarPrimary">
<ul id="sidebarPrimaryNav">
<li class="navButton"><a href="#"><span class="fa fa-home"></span>Home</a></li>
<li class="navButton"><a href="#"><span class="fa fa-user"></span>Personal Details</a></li>
<li class="navButton"><a href="#"><span class="fa fa-briefcase"></span>Company</a></li>
<li class="navButton"><a href="#"><span class="fa fa-gbp"></span>Invoices</a></li>
<li class="navButton"><a href="#"><span class="fa fa-address-book"></span>Contacts</a></li>
<li class="navButton"><a href="#"><span class="fa fa-minus"></span>Expenses</a></li>
<li class="navButton"><a href="#"><span class="fa fa-list"></span>Payslips</a></li>
<li class="navButton"><a href="#"><span class="fa fa-cog"></span>Settings</a></li>
</ul>
</div>
CSS :
/* SIDEBAR PRIMARY */
#sidebarPrimary
{
position: fixed;
width: 15vw;
height: 100%;
top: 0;
left: 0;
background: #2F323E;
}
#sidebarPrimary > ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
#sidebarPrimary > ul > li.navButton
{
width: 100%;
height: 15vw;
}
#sidebarPrimary > ul > li.navButton > a
{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: #687381;
font-size: 12px;
font-weight: 500;
transition: all linear 0.05s;
-webkit-transition: all linear 0.05s;
-moz-transition: all linear 0.05s;
}
#sidebarPrimary > ul > li.navButton > a:hover
{
text-decoration: none;
color: #fff;
background: #E95656;
}
#sidebarPrimary > ul > li.navButton > a > span
{
display: block;
text-align: center;
margin-bottom: 5px;
}