Ant Design Pagination如何修改默认翻页箭头为FontAwesome图标

直接用Pagination自带的itemRender配置项就能实现，不需要改源码、不需要额外写CSS覆盖隐藏默认图标，这个属性就是官方开放给开发者自定义所有分页交互元素渲染的，直接在现有Table的pagination配置里加这个字段即可。

实现逻辑 #

在itemRender的回调里，可以拿到当前渲染元素的类型，针对不同类型的翻页按钮替换成目标FontAwesome图标即可，对应按钮类型说明：

• prev：上一页按钮，对应默认左向单箭头
• next：下一页按钮，对应默认右向单箭头
• jump-prev：向前快跳多页的按钮，对应默认左向双箭头
• jump-next：向后快跳多页的按钮，对应默认右向双箭头
• page：普通数字页码按钮，保留默认渲染即可

完整修改后代码 #

// 若使用React组件方式引入FontAwesome，提前引入需要的图标
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { 
  faChevronLeft, 
  faChevronRight, 
  faAnglesLeft, 
  faAnglesRight 
} from '@fortawesome/free-solid-svg-icons'

<Table
  columns={columns}
  dataSource={newData}
  loading={historyPaymentsIsLoading}
  showSorterTooltip={false}
  rowKey={(record) => record.rowId}
  scroll={{ x: 'max-content' }}
  onChange={handlePaginationChange}
  pagination={{
    showSizeChanger: true,
    showQuickJumper: true,
    defaultPageSize: 25,
    pageSizeOptions: ['25', '50', '100'],
    position: ['bottomLeft'],
    size: 'default',
    // 新增自定义图标渲染逻辑
    itemRender: (_, type, originalElement) => {
      switch (type) {
        case 'prev':
          return (
            <button className="ant-pagination-item-link" type="button">
              <FontAwesomeIcon icon={faChevronLeft} />
            </button>
          )
        case 'next':
          return (
            <button className="ant-pagination-item-link" type="button">
              <FontAwesomeIcon icon={faChevronRight} />
            </button>
          )
        case 'jump-prev':
          return (
            <button className="ant-pagination-item-link" type="button">
              <FontAwesomeIcon icon={faAnglesLeft} />
            </button>
          )
        case 'jump-next':
          return (
            <button className="ant-pagination-item-link" type="button">
              <FontAwesomeIcon icon={faAnglesRight} />
            </button>
          )
        default:
          // 普通页码返回默认渲染元素
          return originalElement
      }
    }
  }}
/>

注意事项 #

• 自定义按钮外层一定要保留ant-pagination-item-link类名，否则会丢失Antd默认的hover、禁用态、尺寸适配等交互样式，不需要额外写CSS做对齐。
• 如果用webfont类名方式引入FontAwesome，直接把示例里的FontAwesomeIcon标签替换成<i className="fa-solid fa-chevron-left"></i>这类写法即可，逻辑完全一致。
• 每页条数选择器的下拉箭头属于Select组件图标，不属于分页翻页箭头，如需替换可以通过ConfigProvider全局配置Select的suffixIcon属性实现。

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