Add text below font-awesome icon

Question

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 spinner-text{width} 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.

My HTML:

<div class="center-parent" id="spinner">
    <div class="center-container">
        <i class="fa fa-cog fa-spin"></i>
        <span class="spinner-text">Please wait while we gather data from wherever...</span>
    </div>
</div>

My CSS:

.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;
}

I test the spinner with the following JavaScript:

<script type="text/javascript">
    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;
        }
    };
</script>

I've looked into the following and didn't find a fix:

Font awesome icon button with label below

Center text above font awesome icon?

Centering FontAwesome icons vertically and horizontally

centering text below font awesome icon

Would you be able to convert your code into a working snippet or demo. Thanks — sol

Stickers Stickers · Accepted Answer · 2018-05-24T21:27:55

You made it too complicated it in the example. It can be done with simpler markup and CSS flexbox, and I suggest using fixed rather than absolute position, so it can always cover the entire viewport.

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;
  }
};

.spinner-container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.spinner-container .fa {
  font-size: 30px;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="spinner-container" id="spinner">
  <i class="fa fa-cog fa-spin"></i>
  <span class="spinner-text">Please wait while we gather data from ...</span>
</div>

Add text below font-awesome icon

1 Answers