Ant Design的anticon-star图标在iOS端不显示，安卓和Web端正常如何解决？

问题根因 #

该异常本质是两个原因共同导致的：

• 目前主流的antd v4/v5版本已经弃用了字体图标方案，默认不再内置anticon类对应的字体文件声明，仅靠类名无法加载到正确的图标字体，iOS对缺失字体的 fallback 渲染逻辑就是显示方块
• 全量引入antd.css会携带默认的图标样式重置规则，直接覆盖你项目中可能残留的部分字体图标兼容样式，导致连方块都无法显示

可行修复方案 #

方案1：使用antd官方SVG图标（最推荐） #

不需要依赖字体图标，完全规避跨端字体加载问题，操作步骤：

1. 安装图标依赖：
   npm install @ant-design/icons --save
2. 修改代码，直接传入Star图标组件：

import { StarOutlined } from '@ant-design/icons';
import Rate from 'rc-rate';
import 'rc-rate/assets/index.css';

// 组件内使用
<Fragment>
  <div className="container-surveys">
    <h3>{title}</h3>
    {subtitle && <h4>{subtitle}</h4>}
    <Rate 
      character={<StarOutlined />}
      style={styleStarRating}
      onChange={onChangeRate}
    />
  </div>
</Fragment>

方案2：单独引入字体图标兼容样式 #

如果不想额外安装图标包，可以单独引入antd遗留的字体图标样式，不要引入全量antd.css：
在全局CSS中添加如下声明，字体文件请自行下载存放到项目静态资源目录：

@font-face {
  font-family: 'anticon';
  src: url('你本地存放的anticon字体文件路径.woff') format('woff');
}
.anticon {
  font-family: "anticon" !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

方案3：自定义SVG图标（零依赖） #

完全不依赖antd的图标资源，直接把星星SVG写在组件里，适配所有端：

const CustomStar = () => (
  <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" strokeWidth="2">
    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
  </svg>
)

// 使用时直接传入
<Rate character={<CustomStar />} />

额外检查项 #

如果采用字体图标方案，需要额外确认两个配置：

• 项目打包配置里已经正确配置了.woff、.ttf等字体文件的loader，不会过滤字体资源
• 静态资源服务器返回的字体文件MIME类型正确，iOS对非标准MIME类型的字体资源会直接拦截不加载

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