升级Font Awesome至5.0.13后搜索图标Unicode无法正常显示求助

我之前也碰到过一模一样的情况，Font Awesome 5对字体结构做了不小的调整，这就是你图标消失的核心原因，具体解决办法分这几步：

• 修正字体名称与字重设置
  Font Awesome 4.x用的是统一的FontAwesome字体名称，但5.x把不同样式（solid/regular/brands）拆分成了独立的字体文件。对于免费版的solid图标，字体名称是"Font Awesome 5 Free"，而且必须设置font-weight: 900——因为免费版的solid图标只有粗体字重的版本，不设置的话浏览器根本渲染不出来。

  把你原来的input样式修改成这样就行：

  <input 
    id="navbarSearchField" 
    type="text" 
    class="form-control searchInputsHeight" 
    style="font-family: Arial, 'Font Awesome 5 Free'; font-weight: 900;" 
    placeholder="&#xf002; Location" 
    aria-describedby="navbarDate" 
  />
  

• 验证Font Awesome文件是否完整引入
  如果你用本地文件部署，要确保webfonts文件夹里包含fa-solid-900.ttf/.woff2这类字体文件，并且CSS里的字体路径配置正确；如果用CDN，要确认引入的是包含solid样式的版本（比如all.css，而不是只引入brands或者regular的CSS文件）。

• Unicode编码无需调整
  你提到的确实还是搜索图标的正确编码，这部分完全没问题，不用改动。

本质上就是Font Awesome 5对字体的组织方式变了，不再是4.x那种单一字体包，所以必须匹配对应的字体名称和字重，才能让占位符里的图标正常显示。

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