Font Awesome 5伪元素显示白色方框问题求助

我来帮你搞定这个Font Awesome 5图标显示白框的问题！这种情况大多是字体引用不匹配或者资源没加载对导致的，咱们一步步来修复：

问题分析 #

你遇到的白框本质是浏览器找不到对应的Font Awesome字体文件，主要有两个核心问题：

1. 字体家族和权重不匹配：你用了font-family: "Font Awesome 5 Regular"却设置了font-weight:900——Regular风格对应的权重是400，900是Solid风格的权重，这俩搭配会让浏览器找不到正确的字体。
2. 伪元素定位缺失：虽然你的输入框留了左侧padding，但伪元素默认是inline布局，可能位置不对甚至被输入框遮挡。

修复步骤 #

1. 修正字体引用匹配

你用的图标代码\f073是Solid风格的日历图标（calendar-alt），所以要把字体家族改成Solid风格，同时保留900的权重：

.form-action .checkIn:before{
  content: "\f073";
  font-family: "Font Awesome 5 Solid"; /* 替换成Solid家族 */
  font-weight: 900;
  color: #777;
}

如果你确实想用Regular风格的日历图标，需要换成对应的图标代码\f133，同时调整字体家族和权重：

.form-action .checkIn:before{
  content: "\f133"; /* Regular风格日历的代码 */
  font-family: "Font Awesome 5 Regular";
  font-weight: 400; /* Regular对应400权重 */
  color: #777;
}

2. 添加定位让图标正确显示

给li.checkIn设置相对定位，再把伪元素绝对定位到输入框的左侧padding区域，这样图标就能完美对齐：

.form-action .select-bar .checkIn {
  position: relative; /* 作为伪元素的定位容器 */
}

.form-action .checkIn:before{
  /* 保留上面的字体设置 */
  position: absolute;
  left: 12px; /* 调整到输入框内合适的位置 */
  top: 50%;
  transform: translateY(-50%); /* 垂直居中 */
  font-size: 18px; /* 可选：调整图标大小 */
}

3. 确保Font Awesome资源正确加载

一定要确认你的页面已经引入了Font Awesome 5的完整CSS文件（包含Solid和Regular风格的字体），如果是本地引入，要保证字体文件路径正确；如果是用CDN，要确保引入的是包含所有风格的核心样式文件。

修改后的完整CSS示例 #

.form-action .select-bar .checkIn {
  position: relative;
}

.checkIn input{
  width:170px;
  height:42px;
  padding:0px 0px 0px 40px;
}

.form-action .checkIn:before{
  content: "\f073";
  font-family: "Font Awesome 5 Solid";
  font-weight: 900;
  color: #777;
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
}

这样调整后，白框问题应该就能解决啦～

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