FontAwesome Perfect Circle + Alignment

.fa-perfect-alignment() {
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    vertical-align: bottom;
}

/// Create a circle around a Font Awesome icon
///
/// @param {Number [unit]} $size
///   The size of the circle

.set-circular-size(@size) {
    .fa-perfect-alignment();

    height: @size;
    line-height: @size;
    width: @size;

    // Stupid fix for some icons that have weird white space on the top that throws off
    // the perfect centering. These are all magic numbers
    &.u-tachometer-fix {
        line-height: @size - 10px;
    }

    &.u-server-fix {
        line-height: @size + 5px;
    }

    .fa-play {
        margin-left: 3px;
    }
}

.circular-fa {
    .set-circular-size(65px);

    color: #FFFFFF;
    display: block;
    font-size: 40px;
    margin-left: auto;
    margin-right: auto;

    &.blue {
        background-color: #5473b5;
    }
}

----

<section class="circular-fa blue">
    <i class="fa fa-fw fa-server"></i>
</section>