CSS：防止微调器旋转整个列的宽度

Question

我正在使用Font Awesome微调器作为加载图标，但当前它在整个列中以圆形方式旋转（即使不在屏幕的顶部和左侧）。

有人知道如何抑制这种行为并使它旋转到适当的位置或绕很小的轨道旋转吗？这是我当前的CSS代码（将Emotion CSS库用于React.js）。

const top_level_style = css`
  background-color: #222;  
  display: grid;
  grid-template-areas: 
    "status_bar status_bar"
    "tables tables";
`;

const grid_style = css`
  display: grid;
  grid-area: tables;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: .5vw;
  grid-row-gap: 1.5vh;
`;

JSX代码：

   <div className={top_level_style}>
       <div className={grid_style}>
          <i className='fa fa-spinner fa-spin fa-5x' style={{ color: 'white'}}></i> }