Medium alignment font icons inside css circles

Question

I am trying to align the middle icons inside a circle. I use icon fonts in awesome font. My code is as follows

<ul> <li><a href="#"><i class="icon-5x icon-camera"></i></a></li> <li><a href="#"><i class="icon-5x icon-camera"></i></a></li> <li><a href="#"><i class="icon-5x icon-camera"></i></a></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; } 

as well as i tried

 a { line-height: 100%; text-align: center; } 

But these approaches do not work.

Answer 1

Your solution really, you just need to move the width and height declarations to 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:

Demo: http://sassbin.com/gist/5804312/

Answer 2

You can do this with flexbox quite easily. This is my transition, and then returning to the above solution for browsers that do not support flexbox. flexbox Support is huge these days, especially when IE 8 9 and 10 go away.

The trick is to use alignment-content: center to align the center of the icons in a circle and use the alignment elements: 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 .

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> 

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

add this add-on to 'li'

 li{ padding:10px; //or anyvalue } 

or use a special supplement

 li{ padding-top:10px; //or any value } 

remember when you add padding value, the size would also increase, tune and balance them.

Answer 4

List example:

  <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 for the center icon in a 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; }