React FontAwesome提示bell-on图标不可用 如何导入对应通知铃铛图标

问题原因 #

FontAwesome 4.x升级到5.x+版本后，原bell-o空心铃铛图标做了两处调整：

1. 取消了-o的空心图标命名后缀
2. 归属从实心图标包转移到了regular常规图标包

解决方案 #

步骤1：安装免费regular图标包 #

执行安装命令：

npm install @fortawesome/free-regular-svg-icons
# 用yarn的话执行：yarn add @fortawesome/free-regular-svg-icons

步骤2：导入并使用空心铃铛图标 #

为了和solid包里的实心铃铛区分，导入时可以自定义别名：

// 导入实心铃铛（对应原v4的faBell）
import { faBell as faBellSolid } from '@fortawesome/free-solid-svg-icons'
// 导入空心铃铛（对应原v4的faBell-o）
import { faBell as faBellRegular } from '@fortawesome/free-regular-svg-icons'

// 组件中使用
<FontAwesomeIcon icon={faBellRegular} />

带通知角标的实现 #

如果需要实现带未读标记的铃铛效果，不需要找单独的图标，可通过外层嵌套容器配合CSS实现，示例如下：

<div style={{ position: 'relative', display: 'inline-block' }}>
  <FontAwesomeIcon icon={faBellRegular} />
  <span style={{
    position: 'absolute',
    top: '-4px',
    right: '-4px',
    width: '8px',
    height: '8px',
    borderRadius: '50%',
    backgroundColor: '#f5222d'
  }} />
</div>

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