title: Add text below font-awesome icon
body: <p>I have a font-awesome spinner that I am testing. I would like to have a line of text above or below it that is ideally a single line (but still integrates with bootstrap). The code below presents the text below the spinner, but the text is not in a single line. Setting the <code>spinner-text{width}</code> property can put it on a single line, but it is not centered on the icon nor does it resize with bootstrap when the window size changes.</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div class="center-parent" id="spinner"&gt;
      &lt;div class="center-container"&gt;
          &lt;i class="fa fa-cog fa-spin"&gt;&lt;/i&gt;
          &lt;span class="spinner-text"&gt;Please wait while we gather data from wherever...&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>.center-parent {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
  }
  
  .center-container {
      width: 0 auto;
      height: 0 auto;
      font-size: 40px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -30px;
      margin-right: 0;
      margin-bottom: 0;
      margin-left: -30px;
      z-index: -1;
  }
  
  .spinner-text {
      margin: 0 auto;
      display: table;
      width: 100%;
      height: 0 auto;
      font-size: 20px;
      position: absolute;
      text-align: center;
  }
  </code></pre>
  
  <p>I test the spinner with the following JavaScript:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      var spinnerVisible = false;
      $(document).ready(function () { showSpinner() });
      function showSpinner() {
          if (!spinnerVisible) {
              $("div#spinner").fadeIn("fast");
              spinnerVisible = true;
          }
          setTimeout(hideSpinner, 4000);
      };
  
      function hideSpinner() {
          if (spinnerVisible) {
              var spinner = $("div#spinner");
              spinner.stop();
              spinner.fadeOut("fast");
              spinnerVisible = false;
          }
      };
  &lt;/script&gt;
  </code></pre>
  
  <p>I've looked into the following and didn't find a fix:</p>
  
  <p><a href="https://stackoverflow.com/questions/31138745/font-awesome-icon-button-with-label-below">Font awesome icon button with label below</a></p>
  
  <p><a href="https://stackoverflow.com/questions/27965311/center-text-above-font-awesome-icon">Center text above font awesome icon?</a></p>
  
  <p><a href="https://stackoverflow.com/questions/17642953/centering-fontawesome-icons-vertically-and-horizontally">Centering FontAwesome icons vertically and horizontally</a></p>
  
  <p><a href="https://stackoverflow.com/questions/46540296/centering-text-below-font-awesome-icon">centering text below font awesome icon</a></p>