如何将Font Awesome图标嵌入Materialize框架文本输入框内部

实现方案 #

首先添加自定义CSS样式：

/* 给输入框容器加相对定位作为图标定位参照 */
.input-field {
  position: relative;
}
/* 输入框右侧预留图标位置，避免文字和图标重叠 */
.input-field input.validate {
  padding-right: 32px;
  box-sizing: border-box;
}
/* 图标定位样式 */
.input-field .fas {
  position: absolute;
  right: 8px;
  /* 垂直居中，可根据实际字体大小微调数值 */
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  pointer-events: none; /* 避免图标阻挡输入框点击操作 */
}

修正后的HTML代码：

<div class="row" style="margin-top: 0px !important; margin-bottom: 0px !important; padding: 0px !important;">
  <div class="input-field col s12" style="margin-top: 0px !important; margin-bottom: 0px !important; padding: 0px !important;">
    <span class="fas fa-user"></span>
    <input value="X (4)" id="tag" type="text" class="validate white-text" disabled>
  </div>
  <div class="input-field col s12" style="margin-top: 0px !important; margin-bottom: 0px !important; padding: 0px !important;">
    <span class="fas fa-user"></span>
    <input value="X Coin" id="type" type="text" class="validate white-text" disabled>
  </div>
</div>

调整说明 #

• 原代码中仅给图标设置了top/right数值，但父容器默认是静态定位，无法作为定位参照，所以图标位置会偏移，添加相对定位后即可正常参照容器定位
• 用top:50% + 向上偏移自身高度一半的方式实现图标垂直居中，适配不同高度的输入框，比固定top值兼容性更好
• 修正了原HTML中input标签disabled属性多余引号的语法错误

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