React项目className属性使用Font Awesome far类图标不生效问题

问题原因 #

你当前引入的是Font Awesome 4.x版本依赖，该版本仅支持fa统一前缀，没有拆分far（常规样式）、fas（实心样式）、fab（品牌图标）这类分类前缀。far是Font Awesome 5.0及以上版本新增的特性，因此使用老版本依赖加载far前缀的图标无法正常渲染。

解决方法 #

方案1：继续使用4.x版本 #

放弃far前缀写法，保持原有fa前缀即可。4.x版本的fa-edit默认是实心样式，没有空心的regular版本可用，如果你需要空心样式请升级到更高版本。

方案2：升级到Font Awesome 5.x/6.x版本 #

可以根据使用习惯选择两种实现方式：

方式A：兼容原有i标签写法

1. 卸载旧版本依赖

npm uninstall font-awesome

2. 安装新版全量免费依赖

npm install @fortawesome/fontawesome-free

3. 替换引入语句
   删除原有的import 'font-awesome/css/font-awesome.min.css'，改为引入新版样式：

import '@fortawesome/fontawesome-free/css/all.min.css'

调整完成后，你原有的<i className="far fa-edit" style={{fontSize:28,color:"#FC46AA"}}></i>写法即可正常生效。

方式B：使用官方React专属组件（推荐，可按需引入减少打包体积）

1. 卸载旧版本依赖

npm uninstall font-awesome

2. 安装所需依赖

npm install @fortawesome/fontawesome-svg-core @fortawesome/free-regular-svg-icons @fortawesome/react-fontawesome

3. 组件内引入使用

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faEdit } from '@fortawesome/free-regular-svg-icons'

// 组件内部调用
<FontAwesomeIcon icon={faEdit} style={{fontSize:28,color:"#FC46AA"}} />

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