Position font awesome span icon above text within an anchor - html

Question

I'm trying to make some buttons with text positioned below a font awesome icon where both are positioned centrally inside a list item, and I need the anchor element, which also contains the span element for the font awesome icon, to fill the entire size of the list item.
I can fill the list item with the anchor no problem, but I'm having trouble positioning the icon's span above the text in the anchor that contains it.
JSFiddle: https://jsfiddle.net/qod142fz/.
HTML:
<div id="sidebarPrimary">
<ul id="sidebarPrimaryNav">
<li class="navButton"><span class="fa fa-home"></span>Home</li>
<li class="navButton"><span class="fa fa-user"></span>Personal Details</li>
<li class="navButton"><span class="fa fa-briefcase"></span>Company</li>
<li class="navButton"><span class="fa fa-gbp"></span>Invoices</li>
<li class="navButton"><span class="fa fa-address-book"></span>Contacts</li>
<li class="navButton"><span class="fa fa-minus"></span>Expenses</li>
<li class="navButton"><span class="fa fa-list"></span>Payslips</li>
<li class="navButton"><span class="fa fa-cog"></span>Settings</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;
}

Answer 1

Problem is coming from flex. I recommend wrapping another div around the elements that should be centered inside the a tags
/* 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;
text-decoration: none;
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 .fa {
display: block;
height: 1em;
margin: 0 auto 5px;
text-align: center;
width: 1em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="sidebarPrimary">
<ul id="sidebarPrimaryNav">
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-home"></span>Home
</div>
</a></li>
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-user"></span>Personal Details
</div>
</a></li>
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-briefcase"></span>Company
</div>
</a></li>
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-gbp"></span>Invoices
</div>
</a></li>
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-address-book"></span>Contacts
</div>
</a></li>
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-minus"></span>Expenses
</div>
</a></li>
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-list"></span>Payslips
</div>
</a></li>
<li class="navButton"><a href="#">
<div class="navButtonContent">
<span class="fa fa-cog"></span>Settings
</div>
</a></li>
</ul>
</div>

Answer 2

#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 {
position: relative;
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;
width: 20px;
height: 20px;
background-color: red;
position: absolute;
top: 10px;
}
<div id="sidebarPrimary">
<ul id="sidebarPrimaryNav">
<li class="navButton"><span class="fa fa-home"></span>Home</li>
<li class="navButton"><span class="fa fa-user"></span>Personal Details</li>
<li class="navButton"><span class="fa fa-briefcase"></span>Company</li>
<li class="navButton"><span class="fa fa-gbp"></span>Invoices</li>
<li class="navButton"><span class="fa fa-address-book"></span>Contacts</li>
<li class="navButton"><span class="fa fa-minus"></span>Expenses</li>
<li class="navButton"><span class="fa fa-list"></span>Payslips</li>
<li class="navButton"><span class="fa fa-cog"></span>Settings</li>
</ul>
</div>

Answer 3

Just add position: absolute; top: 40px; to font-awesome icons