icons - Material 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 图标

<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，但还需要调整输入的填充以确保输入的文本不会与图标冲突。上面的解决方案仍然可行，但图标右对齐不太可能发生