物化输入内的字体真棒图标答案

【问题标题】：Font awesome icon inside of materialize input物化输入内的字体真棒图标
【发布时间】：2021-11-13 21:58:59
【问题描述】：

我试图在物化文本输入中放置一个很棒的字体图标，但没有运气。我的意思不是经常像他们在他们的网站上展示的那样。

我的意思是这样的：

当前代码：

            <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 style="right:8px;top:10px;" 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 style="right:8px;top:10px;" class="fas fa-user"></span>
          <input value="X Coin" id="type" type="text" class="validate white-text" disabled">
            </div>
          </div>

正如您在图像上看到的那样，它实际上位于 matralize 输入内，因为它位于输入边框底部内。

这使用默认材料化（我的代码）。

我将如何做到这一点？我尝试在输入字段 div 之外添加字体真棒，但除此之外它不会对齐。或者在里面。

感谢阅读。

问候。

【问题讨论】：

你试过<i class="fas fa-user"></i> 或像<i class="fa fa-user"></i>吗？
是的，结果相同。我希望它在输入中，如图所示

标签： html css materialize

【解决方案1】：

通过仅使用css 属性来获得所需的效果来看起来像结构。

body {
  background-color: #4a647b;
}
input {
  background: none;
  border: none;
  color: #d1cfd9;
  padding: 5px;
}
.input-field {
  border-bottom: 1px solid #d1cfd9;
}
.fa {
  color: #d1cfd9;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="row" style="margin-top: 0px !important; margin-bottom: 0px !important; padding: 0px !important; width: 200px">
  <div class="input-field col s12" style="margin-top: 0px !important; margin-bottom: 0px !important; padding: 0px !important;">
    <span style="right:8px;top:10px;" class="fa 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 style="right:8px;top:10px;" class="fa fa-user"></span>
    <input value="X Coin" id="type" type="text" class="validate white-text" disabled>
  </div>
</div>

您的输入元素也存在语法错误。

改变这个：

<input value="X (4)" id="tag" type="text" class="validate white-text" disabled">

到：

<input value="X (4)" id="tag" type="text" class="validate white-text" disabled>

【讨论】：

无论如何要把它集成到Materalize中？ Materalize 已经有边框底了！
我尝试复制您的代码并将其应用于我的代码，结果如下：imgur.com/a/Hkp4PLR
尝试从代码中删除width: 200px或将display: inline-block css添加到输入字段。
是的，因为它有点上面，我想把它往下推，但由于填充我不能
好的尝试显示：inline-block 并从行 div 中删除：200px，结果相同。我还尝试在图标上添加边距以将其向下推，但由于输入本身的填充，我不能这样做

【解决方案2】：

你只需要改变位置：

 <div class="position-relative">
         <div class="input-field">
             <input  type="text" />
             <label for="datepicker2">Add</label>
         </div>
         <div class="position-absolute" style="top:5px;right:0;">
          <i class="material-icons">add</i>
         </div>
    </div>

【讨论】：