已购Font Awesome Pro授权，无法在输入框占位符显示light类搜索图标

最近升级到Font Awesome Pro后，我卡在了输入框占位符显示light类搜索图标这件事上——之前免费版用font-weight:600就能正常显示，换成Pro版本后直接翻车：IE里占位符图标空白，Chrome里显示个方框。

先说说我一开始踩坑的代码：

<input id="navbarSearchField" type="text" class="form-control searchInputsHeight fal" style="font-family:Arial, FontAwesome; color: #777; font-size: 18px;" placeholder="&#xf002; Location" aria-describedby="navbarDate" />

CSS我是在bundle里这么引入的：

"~/Content/web-fonts-with-css/css/fontawesome-all.min.css",

而且项目里已经把Font Awesome Pro的相关文件都放好了（配图：项目中的Font Awesome Pro字体文件结构)

后来琢磨明白问题核心：免费版的字体族名称是FontAwesome，但Pro版本的字体族名称已经改成Font Awesome Pro了！浏览器找不到对应字体文件，自然没法把图标编码解析成正确的图标样式。

解决起来超简单，只需要把输入框样式里的font-family修改为Arial, 'Font Awesome Pro'就行。调整后的代码示例：

<input id="navbarSearchField" type="text" class="form-control searchInputsHeight fal" style="font-family:Arial, 'Font Awesome Pro'; color: #777; font-size: 18px;" placeholder="&#xf002; Location" aria-describedby="navbarDate" />

补充小提醒 #

• 确保你引入的是Font Awesome Pro的完整CSS包，且字体文件的路径和CSS中的引用路径完全匹配
• Pro版本不同字重（light/regular/solid等）对应专门的字体族后缀，比如fal类对应Font Awesome Pro Light，不过直接用Font Awesome Pro作为通用字体族也能正常匹配对应字重的图标

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