更改 FontAwesomeIcon 的大小

Question

我将它用作按钮内部，但我不知道如何更改其大小，以使其更小。

import { faSort } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

... 

<button
  className="my-button"
  onClick={() => this.doSomething()}
  type="button">
  <FontAwesomeIcon icon={faSort} />
</button>

我尝试在开发人员工具中添加width, height,size具有不同的值，但图标没有改变其大小。是因为它是SVG吗？

有办法让它变小吗？

Answer 1

FontAwesome 带有预定义的大小，您可以通过属性大小来控制，如下所示：

<FontAwesomeIcon icon="spinner" size="xs" />
<FontAwesomeIcon icon="spinner" size="lg" />
<FontAwesomeIcon icon="spinner" size="6x" />

但为了获得完全控制，我建议添加一个类名：

<FontAwesomeIcon icon="spinner" className="inside-button" />

可以用 CSS 来控制，如下所示：

.inside-button {
  font-size: 16px;
  color: white;
}