Проблемы
Выпуск № 1
& ldquo; & hellip; размер <i><div> ✲ рассчитывается автоматически. Так как я могу установить font-weightfont-size & dagger; для значка счетчика в зависимости от его размера? & Rdquo;
Выпуск № 2
& ldquo; И я хочу, чтобы он вращался в центре <i> сам по себе. & Rdquo;
✲ Код, предоставленный в вопросе OP, имеет <div> с вложенным <i>; следовательно, это редактирование ссылается на <div> как на элемент, размер которого рассчитан во время выполнения.
& dagger; Ответ Омара находится на правильном пути & mdash; font-size - это свойство CSS, необходимое для управления размером шрифтов значков. Размер самого тега <i> сам по себе не имеет значения.
Решения
Fix # 1
Не было упомянуто о том, как элемент (то есть <i> ссылается на первую ссылку: ✲ выше ) получает его размер смещения и диапазон указанных размеров не были предоставлены во время выполнения, поэтому в демоверсии есть 3 отдельных примера с различными значениями font-size s и соответствующими значениями width.
Оберните элемент блока (например, <div>) вокруг <i>.
Каждый <div> должен иметь совпадающие значения font-size и width.
Каждый вложенный <i> всегда будет таким же font-size, как и его родитель <div>, поскольку font-size из 1em наследуется от родителя.
Fix # 2
- Поскольку все
<i> являются точными font-size как его родительский <div> font-size, в родительском <div> нет свободного места, которое позволяет <i> отклоняться от центра.
Примеры
Подробности прокомментированы в следующих демонстрациях.
Демоверсия # 1
CSS Решение A: Предполагая, что все <div> * width, height и font-size имеют одинаковое значение.
/*
~REQUIRED~ All <i> have the font-size: 1em -- that particular
value is an equivalent to the the same font-size as it's
parent's font-size -- thus each <i> will conform to it's parent
element's font-size.
*/
i {
font-size: 1em;
}
/*
~OPTIONAL~ .bx is added to demonstrate that each icon is centered
and rotating within it's perimeter instead of orbiting around it.
*/
.bx {
border: 1px solid #000;
}
/*
~REQUIRED~ .box0, .box1, and .box2 are at arbitrary font-sizes
and matching width.
*/
.box0 {
font-size: 50px;
width: 50px;
}
.box1 {
font-size: 100px;
width: 100px;
}
.box2 {
font-size: 200px;
width: 200px;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class='bx box0'><i class="fa fa-spinner fa-spin"></i></div>
<div class='bx box1'><i class="fa fa-spinner fa-spin"></i></div>
<div class='bx box2'><i class="fa fa-spinner fa-spin"></i></div>
Демоверсия # 2
Решение для JavaScript: В основном Демо # 1 обновлено с помощью JavaScript. Когда страница загружается:
значения width и font-size каждого <div> ‡ будут заменены на значения height
каждому .vx присваиваются уникальные значения стиля, чтобы продемонстрировать, как JavaScript может обрабатывать <div> с различными размерами
в результате каждый <div> будет квадратом & mdash; его размер определяется по height (включая padding-top/bottom).
// Collect all .vx into a NodeList then convert it into an array.
const vxArray = Array.from(document.querySelectorAll('.vx'));
// For each div.vx in the new array (i.e. vxArray.)...
vxArray.forEach(function(div) {
// ...get the current <div>'s height and...
let vxH = div.clientHeight + "px";
// ...then assign that value to the <div>'s dimensions and...
div.style.width = vxH;
div.style.height = vxH;
// ...change the <div>'s font-size as well.
div.style.fontSize = vxH;
});
/*
~REFERENCE~ Details of property/values in Demo #1 that occur in
Demo #2 can be found in Demo #1.
*/
i {
font-size: 1em;
}
.vx {
border: 1px solid #000;
}
.box3 {
height: 42px;
}
.box4 {
font-size: 89px;
}
.box5 {
height: 4rem;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class='vx box3'><i class="fa fa-spinner fa-spin"></i></div>
<div class='vx box4'><i class="fa fa-spinner fa-spin"></i></div>
<div class='vx box5'><i class="fa fa-spinner fa-spin"></i></div>
Примечание
& ldquo; Как сделать так, чтобы вращатель работал, если высота не равна его ширине? & Rdquo;
Если <div> height отличается от width, он все равно должен работать. Я рекомендую, чтобы <div> были квадратными, чтобы значок шрифта мог соответствовать краю без края, не требуя дополнительных стилей. Помните, что значок шрифта не будет вытягиваться из своей первоначальной формы, чтобы соответствовать большей или большей длине прямоугольника § .
Демоверсия # 3
Решение CSS B: Демонстрация # 1 с применением <div> в качестве прямоугольников.
/*
~OPTIONAL~ Applied is a common default -- needed when layout
elements have relative measurements.
*/
html,
body {
height: 100%;
width: 100%;
}
i {
font-size: 1em;
}
/*
~REQUIRED~ First 3 property/values centers <i> vertically and
horizontally.
*/
.rx {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #000;
}
.rec0 {
font-size: 50px;
height: 50px;
}
/*
~OPTIONAL~ inline-block elements default: width:auto --
<div> width = width of <div>'s content.
*/
.rec1 {
font-size: 100px;
display: inline-block;
}
.rec2 {
font-size: 20ch;
height: 100%;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class='rx rec0'><i class="fa fa-spinner fa-spin"></i></div>
<div class='rx rec1'><i class="fa fa-spinner fa-spin"></i></div>
<div class='rx rec2'><i class="fa fa-spinner fa-spin"></i></div>
‡ в Демоверсия # 2 каждый <div> имеет класс: .vx.
§ есть способы растянуть шрифты, но это не стоит хлопот, и это также выходит за рамки вопроса.
Ссылки
.querySelectorAll()
Array.from()
.forEach()
.clientHeight