FontAwesome fixed .fa-spin

Fixed the FontAwesome .fa-spin so it centers properly

by Maria Karanasou

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
Note how much more unfixed spinners drift up and down over the dashed borders:

<table style="text-align:center">
    <thead>
		<tr>
			<th></th>
			<th colspan="4">Without fix</th>
			<th colspan="4">With fix</th>
		</tr>
	</thead>
	
	<tbody>
		<tr>
			<th>1x</th>
			<td><i class="fa fa-spinner fa-spin"></i></td>
			<td><i class="fa fa-circle-o-notch fa-spin"></i></td>
			<td><i class="fa fa-refresh fa-spin"></i></td>
			<td><i class="fa fa-cog fa-spin"></i></td>
			
			<td class="fix"><i class="fa fa-spinner fa-spin"></i></td>
			<td class="fix"><i class="fa fa-circle-o-notch fa-spin"></i></td>
			<td class="fix"><i class="fa fa-refresh fa-spin"></i></td>
			<td class="fix"><i class="fa fa-cog fa-spin"></i></td>
		</tr>
		
		<tr>
			<th>lg</th>
			<td><i class="fa fa-lg fa-spinner fa-spin"></i></td>
			<td><i class="fa fa-lg fa-circle-o-notch fa-spin"></i></td>
			<td><i class="fa fa-lg fa-refresh fa-spin"></i></td>
			<td><i class="fa fa-lg fa-cog fa-spin"></i></td>
			
			<td class="fix"><i class="fa fa-lg fa-spinner fa-spin"></i></td>
			<td class="fix"><i class="fa fa-lg fa-circle-o-notch fa-spin"></i></td>
			<td class="fix"><i class="fa fa-lg fa-refresh fa-spin"></i></td>
			<td class="fix"><i class="fa fa-lg fa-cog fa-spin"></i></td>
		</tr>
		
		<tr>
			<th>2x</th>
			<td><i class="fa fa-2x fa-spinner fa-spin"></i></td>
			<td><i class="fa fa-2x fa-circle-o-notch fa-spin"></i></td>
			<td><i class="fa fa-2x fa-refresh fa-spin"></i></td>
			<td><i class="fa fa-2x fa-cog fa-spin"></i></td>
			
			<td class="fix"><i class="fa fa-2x fa-spinner fa-spin"></i></td>
			<td class="fix"><i class="fa fa-2x fa-circle-o-notch fa-spin"></i></td>
			<td class="fix"><i class="fa fa-2x fa-refresh fa-spin"></i></td>
			<td class="fix"><i class="fa fa-2x fa-cog fa-spin"></i></td>
		</tr>
		
		<tr>
			<th>3x</th>
			<td><i class="fa fa-3x fa-spinner...

CSS

/***** key rule: *****/
.fix .fa-spin {
    -webkit-transform-origin: 50% calc(50% - .5px);
    transform-origin: 50% calc(50% - .5px);
}







/***** prettification rules: *****/
th {
    font-weight: bold;
    text-align: center;
}
td {
    background-color: #f9bdbb;
    outline: thin dashed #fff;
}
td.fix {
    background-color: #a3e9a4;
}