JSFiddle - React, Tailwind, and code Playground

by Louis Walch

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<p>I would like to have exactly sixed icons stacked icons. The circle should be 60px, however when examining it's container is sized correctly but the actual circle icon is inset. I belive this may also be why the inner icon doesn't look vertically centered.</p>
<br/>
<span class="fa-stack custom">
  <i class="circle fa fa-circle fa-stack-2x"></i>
  <i class="icon fa fa-times fa-stack-1x fa-inverse"></i>
</span>

CSS

BODY {
  font-size: 12px;
  font-family: Courier;
}

.fa-stack.custom {
    font-size: 60px;
    width: 60px;
    height: 60px;
    line-height: 60px;
    overflow: hidden;
    background-color: pink;
}
.fa-stack.custom .circle {
        font-size: 60px;
    }
.fa-stack.custom .icon {
        font-size: 18px;
        color: #ff00ff;
    }