Materail Design Lite - 如何在表单中放置内联图标

Question

我想把脸部图标放在同一行的字段中。代码是这样的：

<i class="material-icons">face</i>
  <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" id="sample3">
    <label class="mdl-textfield__label" for="sample3">Text...</label>
  </div>    

结果如下：

如何将图标和字段放在同一行？

由于

Answer 1

使用电子邮件地址/电子邮件图标作为示例。

<强> HTML

将图标添加为文本字段的子元素

<div class=
"mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-upgraded"
data-upgraded=",MaterialTextfield">
    <input class="mdl-textfield__input" id="textfield-EmailAddress" type=
    "email">
    <label class="mdl-textfield__label" for=
    "textfield-EmailAddress">Email Address</label>
    <span class="mdl-textfield__error">Please Enter Valid Email Address</span>
    <i class="material-icons mdl-textfield__label__icon">mail</i>
</div>

<强> CSS

.mdl-textfield__label__icon {
   position: absolute;
   right: 0;
   top: 20px;
}

所需资源

您需要加载MDL CSS和Material Design Icons

<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">

MDL JS将帮助实现动态行为

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script defer src="https://code.getmdl.io/1.1.3/material.min.js">   </script>

例如，您可以让图标在聚焦时变为与输入相同的“活动”颜色

 .mdl-textfield.is-focused .mdl-textfield__label__icon, .mdl-textfield.is-invalid.is-focused .mdl-textfield__label__icon  {
    color: rgb(63,81,181);
 }

如果您希望图标左对齐，您可以调整上面的CSS，但还需要调整输入上的填充以确保输入的文本不会与图标发生碰撞。仍然可以使用上面的解决方案，但是图标正确对齐它不太可能发生

Answer 2

左侧对齐的文字字段图标有solution by Jeremy Fily。

该解决方案还包括js，根据是否选中了字段和图标，但是左侧图标内嵌的部分是此css

.mdl-textfield__icon {
  width: 32px;
  text-align: center;
  position: absolute;
  line-height: 1.5;
}

.mdl-textfield__icon ~ * {
  margin-left: 48px;
  width: calc(100% - 48px);
}