我知道我可以通过设置font-weight属性来更改fontawesome4图标。但是我怎样才能将值设置为占用 dom 的 100% 大小。例如：
<i class="fa fa-spinner" />
将自动计算<i>的大小。那么如何根据微调器图标的大小设置其字体粗细呢？
这是这方面的一个例子：https://codepen.io/zhaoyi0113/pen/LJWVxg 如果您打开此代码笔，您将看到微调器正在以非常小的尺寸旋转。我希望它自己在<i>的中心旋转。如果我从 css 中删除高度和宽度，它可以正常工作。
我知道一些类，例如fa-5x工作，但我需要在运行时计算<a>的大小。如何以编程方式计算微调器大小？
问题
问题 #1
"...
<i><div>✲的大小是自动计算的。那么，如何根据微调器图标的大小设置font-weightfont-size†呢？
问题 #2
"我希望它自己在
<i>的中心旋转。
✲
OP 问题中提供的代码有一个嵌套<i>的<div>;因此此编辑引用<div>作为在运行时计算其大小的元素。
†Omar 的答案是正确的——font-size是操作图标字体大小所需的 CSS 属性。实际<i>标签本身的大小无关紧要。
解决 方案
修复#1
-
没有提到元素如何(即
<i>参考第一个参考：上面的✲(获得了它的移动大小，也没有在运行时提供所述大小的范围，因此演示有 3 个单独的示例，具有不同的font-size和匹配的width值。
将 块元素(例如
<div>(包裹在<i>周围。每个
<div>都应具有匹配的font-size值和width值。每个嵌套
<i>将始终与其父<div>相同的font-size，因为1em的font-size继承自父级。
修复#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解决方案：基本上是用 JavaScript 更新的演示 #1。页面加载时：
每个
<div>‡的width和font-size值将更改为其height的值每个
.vx都被分配了一个唯一的样式值，以演示JavaScript如何处理不同大小的<div>结果是每个
<div>都将是一个正方形——它的大小取决于它的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>注意
"如果高度不等于其宽度，我该如何使微调器工作？">
如果<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
你可以使用CSS
i {font-size: 100vw}
或者您可以直接在下载中访问 SVG
<img width="100%" src="assets/fontawesome-free-5.0.1/advanced-options/raw-svg/spinner.svg">