平板（iOS/Android）上Font-Awesome伪类图标显示异常求助

哈哈，这个问题我之前帮同事排查过一模一样的！移动端显示方块但桌面正常，直接用标签的图标没问题，大概率是Font Awesome伪类的写法或者移动端字体加载的坑，咱们一步步来捋：

1. 伪类写法没匹配Font Awesome版本 #

Font Awesome不同版本的伪类规则差挺多的，这是最常见的坑：

• 如果你用的是v4.x版本：必须指定font-family: 'FontAwesome'，content用\fXXX格式的编码：

  li:before {
    font-family: 'FontAwesome';
    content: "\f00c"; /* 替换成你要用的图标编码 */
    margin-right: 8px;
    /* 其他样式 */
  }
  

• 如果你用的是v5+版本：得区分图标类型，比如solid图标要加font-weight: 900，字体族也要对应：

  li:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900; /* 这个必须加，solid图标依赖这个权重 */
    content: "\f00c";
    margin-right: 8px;
  }
  

  要是用的是品牌图标（比如GitHub、Twitter），字体族要改成"Font Awesome 5 Brands"，不需要加font-weight。

2. 移动端字体加载延迟/未正确加载 #

移动端浏览器有时候会偷懒，字体还没加载完就先渲染页面，导致伪类的图标变成方块（直接用标签的图标可能因为DOM加载顺序或者浏览器优先级处理不同，反而正常）。

解决办法：

• 确保Font Awesome的CSS是从稳定的源引入的，本地引入的话要检查字体文件路径在移动端能不能访问到。
• 给伪类样式加font-display: block，强制浏览器等字体加载完再渲染，避免临时方块：

  li:before {
    /* 其他样式 */
    font-display: block;
  }
  

3. 移动端浏览器对伪类content的编码处理差异 #

有些旧版本的iOS Safari或者安卓WebView，对CSS里的Unicode编码处理有点挑剔，比如你要是把HTML里的直接写到CSS的content里，肯定会显示方块。

解决办法：

• 确保CSS里的content用的是反斜杠开头的十六进制编码，比如\f00c，不要用HTML实体。
• 可以临时把content改成"测试"，看能不能显示文字，排除编码本身的问题。

4. 样式被移动端的规则覆盖了 #

有时候你写的媒体查询或者其他移动端专属样式，不小心覆盖了伪类的font-family、content这些关键属性，导致图标没法正常渲染。

解决办法：

• 用浏览器的远程调试工具（Chrome连安卓设备，Safari连iOS设备）查看<li:before>的样式，看font-family、font-weight、content这些属性是不是被划掉了（被其他样式覆盖）。
• 如果确实被覆盖，可以给伪类样式加更高优先级，比如加上父元素的类名：

  .your-editor-list li:before {
    font-family: "Font Awesome 5 Free" !important; /* 临时用!important测试，找到冲突后再优化 */
    font-weight: 900 !important;
    content: "\f00c" !important;
  }
  

5. 移动端WebView的字体限制 #

部分安卓平板的系统WebView可能禁用了自定义字体，或者不支持WOFF2这类新字体格式，导致Font Awesome的字体加载失败。

解决办法：

• 确保引入的Font Awesome CSS包含多种字体格式（WOFF2、WOFF、TTF），让浏览器能选自己支持的格式加载。
• 如果是本地引入字体，检查是否把所有格式的文件都放进去了。

先从版本匹配的写法开始排查，这个解决了大部分情况，要是还不行再查字体加载和样式覆盖的问题，应该就能搞定啦！

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