middle aligning icon-fonts inside css circles - css

Question

I am trying to middle align icons inside a circle. I am using icon fonts by font-awesome. My code is as follows
<ul>
<li><i class="icon-5x icon-camera"></i></li>
<li><i class="icon-5x icon-camera"></i></li>
<li><i class="icon-5x icon-camera"></i></li>
</ul>
CSS
ul {
list-style: none;
}
ul li {
display: inline-block;
margin: 15px;
height: 100px;
width: 100px;
border-radius: 50%;
}
ul li a {
font-size: 1em;
color: #000;
display: table-cell;
vertical-align: middle;
text-align: center;
text-decoration: none;
}
and also I tried
a {
line-height: 100%;
text-align: center;
}
But these approaches does not work.

Answer 1

Your solution is valid, you just need to move the width and height declarations into the a:
ul {
list-style: none;
li {
display: inline-block;
background-color: pink;
margin: 15px;
border-radius: 50%;
a {
color: #000;
display: table-cell;
vertical-align: middle;
text-align: center;
height: 100px;
width: 100px;
&, &:hover, &:active {
text-decoration: none;
}
}
}
}
Result:

Answer 2

You can do this with flexbox quite easily. That is my go to and then fallback to the above solution for browsers that don't support flexbox. Flexbox support is awesome these days especially with IE 8 9 & 10 going away.
The trick is to use justify-content: center to align the icon center in the circle and use align-items: center to vertically align the icon in the circle.
Check out this great resource on flexbox. See here for an example pen http://codepen.io/celsowhite/pen/pgVegE.
The HTML:
<ul class="social_links">
<li><a href="" target="_blank">
<i class="fa fa-envelope"></i>
</a></li>
<li><a href="" target="_blank">
<i class="fa fa-twitter"></i>
</a></li>
<li><a href="" target="_blank">
<i class="fa fa-facebook"></i>
</a></li>
</ul>
The SCSS:
ul.social_links {
display: block;
padding: 20px 0px 0px;
li {
display: inline-block;
font-size: 23px;
padding: 0px 10px;
}
}
ul.social_links i {
background: black;
border-radius: 50%;
width: 50px;
height: 50px;
color: #fff;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
transition: all .5s ease-in-out;
&:hover{
background: #555555;
}
}

Answer 3

Use line-height property, that's best, I had same problem I used line-height and it's done.
Example
height:20px;
width:20px;
line-height:20px;
good to go

Answer 4

Example of list :
<ul class="list-unstyled list-coordonne">
<li><i class="fa fa-coordonne" aria-hidden="true"></i><p> 293, Boulevard Abdelmoumen 20360 - Casablanca Maroc</p></li>
<li><i class="fa fa-coordonne" aria-hidden="true"></i><p> 293, Boulevard Abdelmoumen 20360 - Casablanca Maroc</p></li>
<li><i class="fa fa-coordonne" aria-hidden="true"></i><p> 293, Boulevard Abdelmoumen 20360 - Casablanca Maroc</p></li>
</ul>
CSS code to center icon in circle :
.footer-text .fa-coordonne {
color: white;
background-color: #dad918;
border-radius: 50%;
font-size: 25px;
width: 40px;
height: 40px;
text-align: center;
}
.footer-text .list-coordonne>li:first-child .fa-coordonne:before{
content: '\f041';
text-align: center;
font-weight: 600;
vertical-align: sub;
z-index: 12;
}
.footer-text .list-coordonne>li:nth-child(2) .fa-coordonne:before{
content: '\f003';
text-align: center;
font-weight: 600;
vertical-align: sub;
z-index: 12;
}
.footer-text .list-coordonne>li:last-child .fa-coordonne:before{
content: '\f095';
text-align: center;
font-weight: 600;
vertical-align: -webkit-baseline-middle;
z-index: 12;
}

Answer 5

What I simply like to do is first set the height and width of the icon. Plop it in a div. Apply border radius of 50%(to get a circle) to the div. And give it a background-color(obviously). Set the display property of the div to "flex". justify-content: center and align-items: center. And there you go! Works out for me!

Answer 6

add this padding in 'li'
li{
padding:10px; //or anyvalue
}
or use specific padding
li{
padding-top:10px; //or any value
}
remember when you add padding value then the size would also increases, adjust and balance them.