为什么定位对应的Font Awesome图标无法在input placeholder中正常显示

问题原因 #

你当前引入的是Font Awesome 4.7.0版本，该版本不存在Unicode为的定位图标，这个编码对应的定位图标是Font Awesome 5.0之后新增的资源，这就是为什么搜索图标（属于4.7内置资源）可正常显示、定位图标显示异常的原因。

解决方案 #

方案1：保持当前Font Awesome版本不动，替换兼容的图标编码 #

Font Awesome 4.7内置的定位图标Unicode为，直接修改第二个input的placeholder属性即可：

<input type="text" class="form-control placeholder-icons" placeholder=" &#xf041; Enter Locations">

修改后无需调整其他代码，即可正常显示定位图标。

方案2：升级Font Awesome版本使用目标图标 #

如果你需要使用对应的新版定位图标，可按以下步骤修改：

1. 将原有Font Awesome 4.7.0的CDN资源替换为5.x以上免费版本的官方资源
2. 修改对应CSS样式，适配FA5+的字体规则：

.placeholder-icons {
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
}

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