Добавьте текст под значком шрифта - PullRequest
Новая
       8

Добавьте текст под значком шрифта

0 голосов
/ 24 мая 2018

У меня есть замечательный шрифт, который я тестирую.Я хотел бы иметь строку текста над или под ней, которая в идеале представляет собой одну строку (но все же интегрируется с начальной загрузкой).Код ниже представляет текст под счетчиком, но текст не в одну строку.Задание свойства spinner-text{width} позволяет поместить его в одну строку, но оно не центрируется на значке и не изменяет размер при начальной загрузке при изменении размера окна.

Мой 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>

Мой 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;
}

Я тестирую счетчик со следующим 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>

Я изучил следующее и не нашел исправления:

Кнопка со значком Font Awesome с надписью ниже

По центру текста над значком шрифта Awesome?

Центрирование значков FontAwesome по вертикали и горизонтали

центрирующий текст под шрифтом awesome icon

1 Ответ

0 голосов
/ 25 мая 2018

Вы сделали это слишком сложным в примере.Это можно сделать с помощью более простой разметки и CSS flexbox, и я предлагаю использовать фиксированную, а не абсолютную позицию, чтобы она всегда могла охватывать весь видовой экран. 

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