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

Posted 2023-05-07

【中文标题】物化输入内的字体真棒图标

【英文标题】：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>吗？

是的，结果相同。我希望它在输入中，如图所示

【参考方案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>