为什么我的 Font Awesome 字符没有用这个 CSS 变大？答案

【问题标题】：Why doesn't my Font Awesome character get larger with this CSS?为什么我的 Font Awesome 字符没有用这个 CSS 变大？
【发布时间】：2022-11-22 03:48:56
【问题描述】：

我不知道为什么 font awesome 元素没有变大。

.fa-solid fa-file {
  transform: scale(100);
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<i class="fa-solid fa-file " width="200px" height="300 "></i>

【问题讨论】：

欢迎。请拨打tour 了解本网站的运作方式。

标签： html css

【解决方案1】：

您的 CSS 选择器有问题。它应该是两个类，都带有前面的点，并且紧靠在一起。实际上，它会在类为fa-solid 的元素中查找类型为fa-file 的元素。
您的比例值可能不是您想要的。 100 被解释为 10,000%。 1 将是 100%。

元素上不应有大小属性。让字体本身决定大小。

.fa-solid.fa-file {
  transform: scale(2); /* 2 x original size, or 200% */

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<i class="fa-solid fa-file"></i>

【讨论】：

【解决方案2】：

而不是transform: scale(100);

你应该做font-size:(number but remove the brackets)px;

【讨论】：

规模可能更适合他们的需求，例如悬停效果。使用比例本质上没有错，但这并不能解决主要问题。
是的，但我只是使用我们在帖子中的代码