middle aligning icon-fonts inside css circles

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><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;
}

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;
      }