如何根据父级的宽度和高度设置FontAwesome图标的宽度、高度和位置？

Question

我在我的网页上使用 FontAwesome 图标。包含图标的 div 的高度和宽度基于用户输入。我希望图标随着 div 高度和宽度的变化而适合在 div 内。我还想将图标置于该 div 的中心。 网络上关于此的信息非常有限。

我可以通过 font-size 获取/设置 font-height 或 font-width 吗？字体大小和字体高度/宽度之间有什么关系吗？

Answer 1

FontAwesome 图标位于字体内，因此您可以使用

font-size

设置它们的大小。

您可以使用 jQuery 来做到这一点，如下所示：

$('.icon').css('font-size', 100);

Answer 2

截至 2023 年，最佳答案不再是最好的方法。 根据文档，您可以使用这些类并完成它。我遇到的另一种可能的方法是使用风格。由于某种原因，在我的例子中，类高度不起作用（我正在使用 TailwindCSS）。所以，只需将其添加到您的 FontAwesomeIcon

style={{width:"3rem", height:"3rem"}}

或者您可以使用我链接的文档中列出的方法，但它仅限于某些高度和宽度。