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

Question

我希望将面部图标与字段放在同一行。 代码如下：

```html

我想把面部图标放在同一行上。 代码如下：

```

<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>    

结果如下图所示：

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

谢谢。

- Frankie

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图标。

<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，但还需要调整输入框的填充，以确保输入框的文本不会与图标碰撞。使用上述解决方案仍然可能实现，但是如果图标右对齐，则不太可能发生这种情况。

- Douglas Drouillard

Answer 2

有一个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);
}

- Toby 1 Kenobi