React-FontAwesome中如何添加fa-fw类实现图标间距？

嘿，这个问题我熟！React-FontAwesome的FontAwesomeIcon组件支持直接通过className属性传入Font Awesome的工具类，包括你需要的fa-fw（固定宽度类，用来让图标保持一致宽度，实现整齐的间距对齐）。

给你两种简单的实现方式：

方式一：直接添加className属性 #

这是最直接的方法，直接在组件上加上className="fa-fw"就行。注意哦，你原来的代码里calendar没加引号，这会导致报错，因为icon数组的第二个元素需要是字符串类型，记得补上引号：

<FontAwesomeIcon icon={['far', 'calendar']} className="fa-fw" />

方式二：结合CSS模块或CSS-in-JS（可选） #

如果你的项目用了CSS模块或者styled-components这类方案，也可以把fa-fw的样式集成进去，比如用styled-components的话：

import styled from 'styled-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

const FixedWidthIcon = styled(FontAwesomeIcon)`
  &.fa-fw {
    // 这里可以自定义额外样式，或者直接继承Font Awesome的fa-fw样式
  }
`;

// 使用的时候
<FixedWidthIcon icon={['far', 'calendar']} className="fa-fw" />

简单说，第一种方法就足够解决你的需求啦，fa-fw类会自动让图标拥有固定宽度，这样在列表或者需要对齐的场景下，图标之间的间距就会整齐一致了～

内容的提问来源于stack exchange，提问作者 Kimaya