middle aligning icon-fonts inside css circles

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:

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

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